Have div elements side by side-CodePudding

Is there a way to place div elements side by side. Right now, it is placed one below another

</div>
<div >
  <h4></h4>
  <div >
    <div  style="width: 600px;">
      <label  id="das-label" for="das">das</label>
      <textarea id="das"  style="width:width: 100%;;height:100px;">I </textarea>
    </div>
  </div>
</div>
<div >
  <h4></h4>
  <div >
    <div  style="width: 600px;">
      <label  id="da.-label" for="PAPERCUT SHORT DESC.">da</label>
      <textarea id="da"  style="width:width: 100%;;height:100px;">Ity</textarea>
    </div>
  </div>
</div>

CodePudding user response：

Put both of your Columns inside the same Row and then use the following on each of them.

In Bootstrap, 12 is always full width so 6 is half width. Above says full width on small screens and half width for medium screens and upward.

CodePudding user response：

To align the elements side by side use the flexbox method. Flexbox method helps in the alignment of the div elements. Here I have provided the html code to align div elementsts side by side.

<style>.float-container {
    border: 3px solid #fff;
    padding: 20px;
    display:flex;
    
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    display:inline-block;
    margin-right:20px;
    flex: 1;
    border: 2px solid yellow;
}  
</style>
<div >

  <h4></h4>
  
    <div  >
      <label  id="das-label" for="das">das</label>
      <textarea id="das"  style="width:width: 100%;;height:100px;">Im </textarea>
      </div>
      
      <div  >
      <label  id="da.-label" for="PAPERCUT SHORT DESC." >da</label>
      <textarea id="da"  style="width:width: 100%;;height:100px;">Ity</textarea>
    </div>
      
    </div>

</div>