# Display div side by side using flexbox

**URL:** https://forum.kirupa.com/t/display-div-side-by-side-using-flexbox/642702
**Category:** web dev
**Created:** [May 7, 2020, 5:47am UTC](https://forum.kirupa.com/t/display-div-side-by-side-using-flexbox/642702 "2020-05-07T05:47:28Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Sukhwinder\_Saini](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Sukhwinder\_Saini](https://forum.kirupa.com/u/Sukhwinder_Saini)
#### Post date: [May 7, 2020, 5:47am UTC](https://forum.kirupa.com/t/display-div-side-by-side-using-flexbox/642702/1 "2020-05-07T05:47:28Z")

</div>

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:

```auto
                 <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

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

```

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 7, 2020, 2:00pm UTC](https://forum.kirupa.com/t/display-div-side-by-side-using-flexbox/642702/2 "2020-05-07T14:00:34Z")

</div>

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`.

---

<div class="post-metadata">

### Author: ![Sukhwinder\_Saini](https://avatars.discourse-cdn.com/v4/letter/s/edb3f5/32.png) [@Sukhwinder\_Saini](https://forum.kirupa.com/u/Sukhwinder_Saini)
#### Post date: [May 7, 2020, 4:51pm UTC](https://forum.kirupa.com/t/display-div-side-by-side-using-flexbox/642702/3 "2020-05-07T16:51:52Z")

</div>

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;
}
```