How to keep two side-by-side div elements the same height with CSS?

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.