Display div side by side using flexbox

programming web dev
1

I am trying to display two div side by side using flexbox. My approach is i want to display like
From: input field
To : inputfield
There must be a gap horizonally and vertically between the text and field
I tried:
HTML:

                 <div class="box">
                   <div class="innerElements">
                   <div class="text">
                   <label>From</label>
                   <label>To</label>
                   </div>
                  <div class="inputField">
                    <input type="text"></input>
                    <input type="text"></input>  
                  </div>
                  </div>
                 </div>

CSS

     .box {
        width: auto;
        height: 200px;
        background-color: red;
      }
      .innerElements{
        display: flex;
        flex-direction: column;
      }
2

Why do you have the labels in one div element and the form fields in another? Commonly, you will see each label and form field combination in a single div.

3

Thank you for your suggestion, i got what i need but i am not able to make a gap between two fields, i tried margin top but didn’t work out

    <div class="box">
       <div class="innerElements">
       <div class="text">
       <label>From</label> 
       <label>To</label>  
       </div>
      <div class="inputField">
      <input type="text"></input>
      <input type="text"></input>
    
      </div>
      </div>
     </div>

CSS

.box {
width: auto;
height: 200px;
background-color: red;
}

.text,.inputField{
  display: flex;
  flex-direction: column ;
  float: left;
  margin-right: 10px;
}