How do I keep two side-by-side div elements the same height?

by

Flexbox

With flexbox it’s a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<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>

Prefixes may be required for older browsers, see browser support.

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. How to disable equal height columns in Flexbox?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Center and bottom-align flex items
  5. Fill the remaining height or width in a flex container
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Flexbox: 4 items per row
  8. Alternate table row color using CSS?
  9. Absolutely positioned flex item is not removed from the normal flow in IE11
  10. Heights rendering differently in Chrome and Firefox [duplicate]
  11. Properly sizing and aligning the flex item(s) on the last row
  12. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  13. Fixed Table Cell Width
  14. Maintain image aspect ratio when changing height
  15. How to make fill height
  16. Flexbox not giving equal width to elements
  17. Why does percentage padding break my flex item?
  18. How can I truncate table cells, but fit as much as content possible?
  19. Why does flexbox stretch my image rather than retaining aspect ratio?
  20. How to center-align one flex item and right-align another using Flexbox [duplicate]
  21. Why is there vertical scroll on the main container?
  22. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  23. How can I create a row-based masonry layout using CSS?
  24. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. Removing unwanted table cell borders with CSS
  28. Element with “display: inline-flex” has a strange top margin
  29. Table vertical header?
  30. Sizing flex items on the last row

Leave a Comment