Have div elements side by side

Question

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

</div>
<div class="row">
  <h4></h4>
  <div class="col-sm-12">
    <div class="form-group shiny-input-container" style="width: 600px;">
      <label class="control-label" id="das-label" for="das">das</label>
      <textarea id="das" class="form-control" style="width:width: 100%;;height:100px;">I </textarea>
    </div>
  </div>
</div>
<div class="row">
  <h4></h4>
  <div class="col-sm-12">
    <div class="form-group shiny-input-container" style="width: 600px;">
      <label class="control-label" id="da.-label" for="PAPERCUT SHORT DESC.">da</label>
      <textarea id="da" class="form-control" style="width:width: 100%;;height:100px;">Ity</textarea>
    </div>
  </div>
</div>

Does this answer your question? [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — Roy, Dec 09 '21 at 08:50
You mean the two divs that are in another 'row'? You know what col-sm-12 means? — Wimanicesir, Dec 09 '21 at 08:52

score 0 · Answer 1 · answered Dec 09 '21 at 08:53

0

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

class="col-sm-12 col-md-6"

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.

answered Dec 09 '21 at 08:53

Cutey from Cute Code

1,065
3
13

I tried. But not getting. Can you help please? – manu p Dec 09 '21 at 08:55
Show what you tried so people can adjust your mistakes @manup – Wimanicesir Dec 09 '21 at 08:56
````

das I

da Ity

````
– manu p Dec 09 '21 at 08:58
`width:width:` ? For starters, don't use inline `style` attribute. CSS should be in one place only, and that's its respective tag of file. – Roko C. Buljan Dec 09 '21 at 09:57

score 0 · Answer 2 · answered Dec 09 '21 at 10:10

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 class="float-container">

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

</div>

Have div elements side by side

2 Answers2