Как отобразить 2 элемента рядом и отобразить метку под 1 элементом в реакции ⇐ CSS

[Anonymous]

So I currently have a part of my form which contains an input field and a select menu and I want both of these elements to be displayed side by side and then there be a label or paragraph text directly underneath the input field. I am struggling to achieve this layout as the label either shows up in the same row as the 2 elements or it appears centered underneath them from what I have tried. I have attached 2 images one with my current output and one with my desired output

here is the current code and styles I am using vanilla css with react, any advise on my current approach to the styles is also appreciated if I am not going about it the correct way please let me know

current output label is Last ->



desired output label is (Example Jr - Sr) ->



component:

return ( {/* Apply background color to this div */} {/* Flex container to align items */} navigate(-1)}>< Create new profile {/* Add left margin */} Personal Details

Start by entering as much info as you can
{/* First row with input and select side by side */} Last -- Relationship Select an option -- )
styles:
.flex.items-center { display: flex; /* Use flexbox */ } .centered-container { display: flex; justify-content: center; align-items: center; } .back-btn { background: transparent; border: none; font-size: 1.5rem; cursor: pointer; } .medallionHeading { margin-left: 1rem; /* Add left margin */ padding-top: 0.5rem; } .border-bottom { border-bottom: 1px solid #ccc; margin: 0.5rem 1rem 0.5rem 1rem; /* top, right, bottom, left*/ } .info-para { margin-left: 1rem; } .name-inputs { width: 30%; margin: 0.25rem; } .title-and-relationship-inputs { width: 48%; margin: 0.25rem; } .label-below { font-size: 0.75rem; color: #888; margin-top: 0.25rem; display: block; } .flex-container { display: flex; align-items: center; } .checkbox-label { margin-left: 1rem; /* Adjust the margin as needed */ }

Источник: https://stackoverflow.com/questions/780 ... eath-1-ele