CSS: How to force smaller div to become same height as larger counterpart

Question

I have one large div, .container, that is going to contain two smaller divs, .col, that will contain even smaller individual divs, .inner-col. I need .col divs to always have the same height while each .inner-col div to be the same height as their counterpart. By counterpart I mean when they are side by side they should be the same height.

In this snippet, I have it working almost how I want it to. Each of the headings lines up with their side-by-side counterpart but there is just so much extra space, not to mention it's been hardcoded at 600px for each .inner-col. Is there a way for me to do get each one to line up properly with their counterpart div without all that excess whitespace without JavaScript?

Snippet

.container {
  display: flex;
}

.col {
  border: solid;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.inner-col {
  height: 600px;
}

<div class="container">

  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem Ipsum 
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>
  
  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem Ipsum Lorem Ipsum 
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
        
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>

</div>

Edit

Initially, I found this question but it's not exactly what I need.

score 1 · Answer 1 · answered Mar 31 '18 at 18:51

1

I don't think that's possible, your div.inner-col metrics can never be known in the sibling div.col. Looks pretty much like an old-fashioned <table> to me. Even if it isn't table data your displaying, wouldn't it make more sense to do it by row instead of column?

answered Mar 31 '18 at 18:51

Jan Misker

2,129
16
26

I think this is close but the same goes for Rusell's answer. On smaller screens I need to make sure the page collapses correctly. I'm not 100% sure but I don't think the table would solve that problem right? Example, everything under the first `` should be on top of the second `` on small screen widths. – Brandon Benefield Mar 31 '18 at 19:18
@BrandonBenefield If you use CSS display: table property you can achieve the responsiveness without a doubt. Please check my solution below. – forethought Mar 31 '18 at 19:22

score 0 · Answer 2 · answered Mar 31 '18 at 19:08

I hope this isn't too similar to the question you saw, but Jan is right that the row based display is the easiest solution. It would require some rearranging of the HTML but should work the same.

.container {
  display: flex;
  flex-direction: column;
}

.col {
  border: solid;
  display: flex;
  width: 100%;
}

.inner-col {
  height: 100%;
  width: 100%;
}

<div class="container">

  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem A
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem B Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>
  
  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem C Ipsum Lorem Ipsum 
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem D Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
        
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>

</div>

While I'm not against tables, use whatever gets the job done, I have to think about responsiveness. `Lorem A` - `Lorem D` are all headings. `Lorem A` and `Lorem C` are in the same vertical row and `Lorem B` and `Lorem C` are in their own. So when the page folds on smaller sizes, I would need `A + C` to appear on top of `B + D`. Otherwise this would work. — Brandon Benefield, Mar 31 '18 at 19:14
Just realized this isn't a table, but the rest of my comment is still true. — Brandon Benefield, Mar 31 '18 at 19:15
@BrandonBenefield I see! I would recommend using open-source [Twitter Bootstrap](https://getbootstrap.com/) to create a responsive design. I think using their grid system (which uses flex) in conjunction with [responsive reordering](https://getbootstrap.com/docs/4.0/layout/grid/#reordering) will work out awesome. — Russell, Mar 31 '18 at 19:35
Not a bad solution but I can't justify including an entire css lib for one problem. Although I could use bootstrap as a reference and see how theyre doing it. — Brandon Benefield, Mar 31 '18 at 19:51
@BrandonBenefield I use Bootstrap with [Purify CSS](https://www.npmjs.com/package/purify-css) and it adds ~20-25 kb to my css build, but I use Bootstrap a lot in my code. — Russell, Mar 31 '18 at 20:00

forethought · Answer 3 · 2018-03-31T20:37:46.200

You can use display: table to have inner-col elements same height. Using CSS display: table property gives you a freedom to change the display property when in mobile and tablet viewport.

.wrapper{
  display: flex;
}

.container{
  display: flex; 
  flex-direction: column;
  width: 100%;
}


.col{
  display: flex;
  width: 100%;
}

.inner-col{
  width: 50%;
}

@media (max-width: 900px){
  .col{
    flex-direction: column;
  }
  .inner-col{
  width: 100%;
}
}

<div class="wrapper">
  <div class="container">

  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem Ipsum 
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>
  
  <div class="col">
    <div class="inner-col">
      <h2>
        Lorem Ipsum Lorem Ipsum 
      </h2>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
    <div class="inner-col">
      <h3>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </h3>
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
        
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
      </p>
    </div>
  </div>

</div>

  </div>

It's close. But the H2's need to be side by side. With the H3's underneath. — Brandon Benefield, Mar 31 '18 at 19:28
@BrandonBenefield then you will have to rearrange the content a bit. All the columns goes into inner-col of first col then followed by their respective content. — forethought, Mar 31 '18 at 19:43
While this does look right on large screens, when the page collapses and the screen becomes a more vertical represenation then it will be `
` when what I need is `
`. This is why HTML structure is so important in my original snippet. — Brandon Benefield, Mar 31 '18 at 19:49
I see. Please check the structure of the HTML now. I have added a wrapper div to contain all content and apply display: flex property to it. — forethought, Mar 31 '18 at 20:06

CSS: How to force smaller div to become same height as larger counterpart

Snippet

Edit

3 Answers3

` when what I need is `

`. This is why HTML structure is so important in my original snippet.