How can I align vertically and horizontally my fields for each column?

Question

How do I align my columns horizontally and vertically aligned in each column?

Here the picture (whatI have/whatI want):

export default function App() {
       ...
       <form onSubmit={handleSubmit}>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Title:
        </label>
        <input.../>
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
         ...       
}

CustomDropdown contains other CSS:

import Tag from './Tag'    
export default function CustomDropdown({ className, style, options, styleSelect, defaultValue, isMulti = false }) {
    const [selected, setSelected] = useState(defaultValue);

    const styles = {
        select: {
            width: '100%',
            maxWidth: 200,
        }
    }

    return (
        <>
            {selected && isMulti === false ?
                <Tag selected={selected} setSelected={setSelected} styleSelect={styleSelect} />
                :
                <Select className={className} style={styles.select} value={selected} onChange={setSelected} options={options} isMulti={isMulti} />
            }
        </>
    )
}

Tag.jsx:

export default function Tag({ selected, setSelected, styleSelect }) {
   ...
    return (
        <div style={{ display: "flex", justifyContent: "space-around", padding: "0.1em",..." }}>
            {selected.label}
           ...
        </div>
    )
}

Here is my code

Answer 1

try to use tailwind grid instead of using flex.