Flex

Use a bare-bones flex container, with nothing set except display: flex.

override CSS defaults

• Switch the direction, which is horizontal (row) by default, to vertical (column). It's best to switch conditionally.
• Increase the gap (defaults to 0)
• Control justify, aka main axis alignment, which default to flex-start.
• Control align, aka cross-axis alignment, which defaults to stretch.

Example of a responsive flex container:

<Flex
    direction={{ base: "column", sm: "row" }}
    gap={{ base: "sm", sm: "lg" }}
    justify={{ base: "flex-start", sm: "space-between" }}
/>