Multiple Listbox buttons in a flex container

[TraceLTRC]

I am currently trying to create multiple listboxes and grouping them with a flexbox container. I was able to group the buttons. However, opening the options menu results in the menu being apart of the flexbox children, causing it to appear to the right of the button instead of the bottom as you'd expect.

I was able to fix this by setting the options menu to be absolute and guessing the correct parameters for top/left for the options menu to appear below the button. However, I think this is bad practice. Is there a better way of doing this? Thank you!

My code:

import { Listbox } from "@headlessui/react";
import { useEffect } from "react";

type Props = {
    currArtist: string[];
    allArtist: string[];
    setArtist: (artist: string[]) => void;

    currMeta: string[];
    allMeta: string[];
    setMeta: (meta: string[]) => void;

    currChar: string[];
    allChar: string[];
    setChar: (char: string[]) => void;
}

export default function Filter(props: Props) {
    return(
        <div className="my-2 mx-24 h-16 shadow-2xl bg-white rounded-xl flex flex-row gap-4">
            <Listbox value={props.currArtist} onChange={props.setArtist} multiple>
                <Listbox.Button className="my-2 ml-2 p-2 rounded-xl min-w-[4rem] bg-zinc-200">
                    {props.currArtist.length === 0 ? "Artist..." : props.currArtist.join(',')}
                </Listbox.Button>
                <Listbox.Options className="absolute top-72 left-28">
                    {props.allArtist.map((artist, index) => (
                        <Listbox.Option
                            key={index}
                            value={artist}
                        >
                            {artist}
                        </Listbox.Option>
                    ))}
                </Listbox.Options>
            </Listbox>
            <Listbox value={props.currChar} onChange={props.setChar} multiple>
                <Listbox.Button className="my-2 p-2 rounded-xl bg-zinc-200">
                    {props.currChar.length === 0 ? "Character..." : props.currChar.join(',')}
                 </Listbox.Button>
                <Listbox.Options>
                    {props.allChar.map((char, index) => (
                        <Listbox.Option
                            key={index}
                            value={char}
                        >
                            {char}
                        </Listbox.Option>
                    ))}
                </Listbox.Options>
            </Listbox>
        </div>
    )
}