How do I force label and dropdown to be on same line?

I want to force the dropdown and the label to be on the same line. How can I force this. Because for now I get the label : Taste above the dropdown.

export default function MenuItemDisplay() {
    ...
    return (
        <div>
            ...
            <div className="TextData"> 
                Taste : <CustomDropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} />
            </div>
            ...

        </div >
    );
}

CustomDropdown:

export default function CustomDropdown({ style, options, styleSelect, defaultValue, isMulti }) {
    return <div style={style}>
        <Select styles={styleSelect} options={options} defaultValue={defaultValue} isMulti={isMulti} />
    </div>
}

Answer

Try this. or display:flex

.textData {
    display:grid; 
    grid-template-columns:auto auto; 
    }