CODEWITHSUNDEEP
htmlcssalignmentmultiple-columns
Kieranmv95
Kieranmv95

Reputation: 828

CSS | Match dynamic div heights inside row

feel free to rephrase my question title, I couldn't think of how to word it correctly.

Having some CSS related issues.I have a row element (not to be confused with bootstrap this is separate). and inside this I have two columns.

the columns are both dynamic in the sense that on resize they change height. how can I get the divs to match the tallest element.

I am trying to find a way to do this with Pure CSS. Hopefully the image below explains my theory more

enter image description here

My real example is below, I need the first column ( the one with the line in ) to match the height of the form div both contained within the row

enter image description here

Upvotes: 0

Views: 84

Answers (1)

Karl Dawson
Karl Dawson

Reputation: 977

Two alternatives:

CSS tables

.row {
  display: table;
  width: 500px; /* for demo */
  background-color: #eee;
  border-spacing: 5px;
}

.col {
  display: table-cell;
  vertical-align: top;
  padding: 5px;
  border: 1px solid red;
}

.col1 {
  width: 100px;
}
<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

And using CSS Flexbox

.row {
  display: flex;
  align-items: stretch;
  width: 500px;
}

.col {
  margin: 5px;
  padding: 5px;
  border: 1px solid red;
}
<div class="row">
  <div class="col col1">
    short column
  </div>
  <div class="col col2">
    long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
  </div>
</div>

This is obviously stripped down to the bare essentials, mileage may vary depending on your design and it's responsiveness.

Upvotes: 2

Related Questions