Sometimes, we want to keep two side-by-side div elements the same height with CSS.
In this article, we’ll look at how to keep two side-by-side div elements the same height with CSS.
How to keep two side-by-side div elements the same height with CSS?
To keep two side-by-side div elements the same height with CSS, we use flexbox.
For instance, we write
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae
expedita ipsum nobis praesentium velit animi minus amet perspiciatis
laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
</div>
</div>
to add nested divs.
Then we write
.row {
display: flex;
}
.col {
flex: 1;
padding: 1em;
border: solid;
}
to make the outer div a flex container with display: flex;
.
Then we make the inner divs equal height with flex: 1;
.
Conclusion
To keep two side-by-side div elements the same height with CSS, we use flexbox.