How To Get Multiple Containers Height The Same With Height: Auto

I have two inline-block elements which are containers - #keyPointsBlock and #caseSlider. The block with the image will always be taller. I am wanting to match the two elements in h

Solution 1:

By simply use Flexbox and add display: flex to your #slideSec they will line up with equal high.

This works as flex children in a row direction (the default), with the align-items default stretch, will make all children on the same row be the same height, no matter which is the highest.

Furthermore, add display: block to your img so it lines up properly (w/o the white space that surrounds inline/-block elements) and then remove all the height: 100% (and height: auto as it is the default), as that will not work well with Flexbox.

Note, in below code sample I removed the unnecessary properties.

If you need to control the inner elements too, better to nest Flexbox.

Stack snippet

/*-- Slider Section --*/#slideSec {
  min-height: 400px;
  display: flex;
}

.slideSecBlock {
  position: relative;
}

/*- Key Points -*/#keyPointsBlock {
  width: 40%;
  background: green;
  position: relative;
}

#keyPointsTitle {
  font-family: 'Muli', sans-serif;
  font-size: 2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

#keyPointsList {
  text-decoration: none;
}

#keyPointsListli {
  margin-bottom: 8px;
}

/*- Case Slider -*/#caseSlider {
  width: 60%;
}

.caseSlide {
}

.caseSlideimg {
  display: block;
  width: 100%;
  object-fit: contain;
}

<sectionid="slideSec"><divclass="slideSecBlock"id="keyPointsBlock"><div><h2id="keyPointsTitle">Key Points</h2><ulid="keyPointsList"><li>A</li><li>B</li><li>C</li></ul></div></div><divclass="slideSecBlock"id="caseSlider"><divclass="caseSlide"><imgsrc="https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg"alt=""></div></div></section>

Solution 2:

You can use flex-box to achieve this. I made the CSS change for #slideSec - added flex and for .slideSecBlock removed the height.Play with flexbox here

/*-- Slider Section --*/#slideSec {
  width: 100%;
  height: auto;
  min-height: 400px;
  display: flex;
}
/*- Key Points -*/#keyPointsBlock {
  width: 40%;
  background: green;
}
#keyPointsTitle {
  font-family: 'Muli', sans-serif;
  font-size: 2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
}
#keyPointsList {
  text-decoration: none;
}
#keyPointsListli {
  margin-bottom: 8px;
}
/*- Case Slider -*/#caseSlider {
  width: 60%;
}
.caseSlide {
  width: 100%;
  font-size: 0;
}
.caseSlideimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<sectionid="slideSec"><divclass="slideSecBlock"id="keyPointsBlock"><div><h2id="keyPointsTitle">Key Points</h2><ulid="keyPointsList"><li>A</li><li>B</li><li>C</li></ul></div></div><divclass="slideSecBlock"id="caseSlider"><divclass="caseSlide"><imgsrc="https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg"alt=""></div></div></section>