How to get images and container to have the same height

Question

I am having troubles getting two inline-block sections (#sec2BlockA and #sec2BlockB) to line up with height. I want the two sections to always be the same height. Right now the image is too short and for some reason the object-fit:cover is not expanding the image to cover the entire area.

Then the .bottomArrowButton is overlapping the right side text.

Dependent on the viewport and text quantity, I am wanting all section to pair up, like the two images below:

I am not sure what I am doing wrong with this formation. Does anyone see what I could do.

#sec2 {
  width: 100%;
  height: auto;
}

#sec2BlockA,
#sec2BlockB {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

#sec2BlockA {
  width: 40%;
  height: 100%;
  overflow: hidden;
}

#sec2BlockA img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

#sec2BlockB {
  width: 60%;
  height: 100%;
  position: relative;
}

#sec2BlockBWrap {
  height: auto;
}

.bottomArrowButton {
  width: 100%;
  height: 100px;
  bottom: 0;
  display: block;
  background: #EDEDED;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.bottomArrowButton:hover {
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  background: #000;
}

.bottomArrowButton:hover .moreEventsLink {
  color: #FFF;
}

.bottomArrowButton:hover .rightArrow {
  background-size: 15px 15px;
  background-repeat: none;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

.moreEventsLink {
  display: inline-block;
  vertical-align: middle;
  color: #58595b;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: 'Nunito', sans-serif;
}

<section id="sec2">
  <div id="sec2BlockA">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/engineer.jpg" alt="Testing">
  </div>
  <div id="sec2BlockB">
    <div class="sec80" id="Sec2BlockBWrap">
      <h2 class="blockTG">Testing</h2>
      <div class="clear"></div>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <a href="solutions.php">
      <div class="bottomArrowButton">
        <div class="total-center">
          <span class="moreEventsLink">BUTTON</span>
        </div>
      </div>
    </a>
  </div>
</section>

Answer 1

object fit only works if both dimensions are defined. If your right content is always going to be taller, you can absolutely position your left div so the height:100% will work on the image:

#sec2 {
  width: 100%;
  position: relative;
}

#sec2BlockA,
#sec2BlockB {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

#sec2BlockA {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
}

#sec2BlockA img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#sec2BlockB {
  width: 60%;
  position: relative;
  left:40%;
}

#sec2BlockBWrap {
  height: auto;
}

.bottomArrowButton {
  width: 100%;
  height: 100px;
  bottom: 0;
  display: block;
  background: #EDEDED;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.bottomArrowButton:hover {
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  background: #000;
}

.bottomArrowButton:hover .moreEventsLink {
  color: #FFF;
}

.bottomArrowButton:hover .rightArrow {
  background-size: 15px 15px;
  background-repeat: none;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

.moreEventsLink {
  display: inline-block;
  vertical-align: middle;
  color: #58595b;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: 'Nunito', sans-serif;
}

<section id="sec2">
  <div id="sec2BlockA">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/engineer.jpg" alt="Testing">
  </div>
  <div id="sec2BlockB">
    <div class="sec80" id="Sec2BlockBWrap">
      <h2 class="blockTG">Testing</h2>
      <div class="clear"></div>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <a href="solutions.php">
      <div class="bottomArrowButton">
        <div class="total-center">
          <span class="moreEventsLink">BUTTON</span>
        </div>
      </div>
    </a>
  </div>
</section>

Answer 2

The problem overlapping is because of position absolute of the bottomArrowButton, being absolute positioned it removes it from the flow.

.bottomArrowButton {
    width: 100%;
    height: 100px;
    bottom: 0;
    display: block;
    background: #EDEDED;
    position: absolute;
    cursor: pointer;
    transition: all .35s ease;-webkit-transition:all .35s ease;
}

For a solution I would be using flex:

#sec2 {
    display: flex;
    width: 100%;
    height: auto;
}

Answer 3

Solution 1

The problem is that in CSS height: 100% works if it's parent has height set.

In your case you have height: auto which is why, the right element has lower height.

If you change height from auto to for example 500px it works properly.

Solution 2

You can also change relative elemnt like here:

#sec2 {
  width: 100%;
  height: auto;
  position: relative;
}

#sec2BlockA,
#sec2BlockB {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

#sec2BlockA {
  width: 40%;
  height: 100%;
  overflow: hidden;
}

#sec2BlockA img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

#sec2BlockB {
  width: 59%;
  height: 100%;
}

#sec2BlockBWrap {
  height: auto;
}

.bottomArrowButton {
  width: 60%;
  height: 100px;
  bottom: 0;
  display: block;
  background: #EDEDED;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.bottomArrowButton:hover {
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  background: #000;
}

.bottomArrowButton:hover .moreEventsLink {
  color: #FFF;
}

.bottomArrowButton:hover .rightArrow {
  background-size: 15px 15px;
  background-repeat: none;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

.moreEventsLink {
  display: inline-block;
  vertical-align: middle;
  color: #58595b;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: 'Nunito', sans-serif;
}

<section id="sec2">
  <div id="sec2BlockA">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/engineer.jpg" alt="Testing">
  </div>
  <div id="sec2BlockB">
    <div class="sec80" id="Sec2BlockBWrap">
      <h2 class="blockTG">Testing</h2>
      <div class="clear"></div>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <a href="solutions.php">
      <div class="bottomArrowButton">
        <div class="total-center">
          <span class="moreEventsLink">BUTTON</span>
        </div>
      </div>
    </a>
  </div>
</section>