Sometimes, we want to get two divs side-by-side with CSS.
In tis article, we’ll look at how to get two divs side-by-side with CSS.
How to get two divs side-by-side with CSS?
To get two divs side-by-side with CSS, we use flexbox.
For instance, we write
<div id="parent_div_1">
<div class="child_div_1"></div>
<div class="child_div_2"></div>
</div>
<div id="parent_div_2">
<div class="child_div_1"></div>
<div class="child_div_2"></div>
</div>
<div id="parent_div_3">
<div class="child_div_1"></div>
<div class="child_div_2"></div>
</div>
to add nested divs.
Then we write
#parent_div_1,
#parent_div_2,
#parent_div_3 {
display: flex;
}
to make the 3 outer divs flex containers with display: flex;.
Now the child divs will show side by side.
Conclusion
To get two divs side-by-side with CSS, we use flexbox.
