Make columns equal heights

Question

I am working on 2 columns made with Bootstrap 3. We cannot change to Bootstrap 4 at the moment, since we are having a webshop with over 100.000 products. So that is a project for the future, since we do not have time right now. Therefore solutions with solve the below problem with Bootstrap 4 is not an option right now.

At the moment I am working with Bootstrap 3. I am having some problems make my columns equal heights. The right is smaller than the left one.

Does anybody know a good solution, so the columns are having equal height - even if the viewport is changing? It does not matter when the viewport is mobile.

There is a JSFiddle here

.row [class*="col-"] {
 padding-right: 7.5px;
 padding-left: 7.5px;
}
.padding-twocolumn-bg {
 margin-bottom:30px;
}
.business-left-img a img { 
 width: auto; 
 margin:auto 
}
.business-left {
 padding:75px 75px 40px 75px;
}
.classWithPad { 
 margin:8px; 
 padding:10px; 
 background-color: #fff; 
 border:1px solid #ebecf0;
}

<div class="wrapper">
 <!-- Section 7 -->
 <div class="section padding-twocolumn-bg">
 <div class="row">
 <div class="text-center col-md-6 business-left-img">
 <div class="classWithPad">
 <p class="business-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <a><img src="https://placehold.it/150x150" class="img-responsive"></a>
 <h2>AGA-Tools</h2>
 <p>Name - Position</p>
 <a href="tel[phone]">[phone]</a>
 </div>
 </div>
 <div class="text-center col-md-6">
 <div class="classWithPad">
 <div class="row">
 <div class="col-sm-12">
 <h3 class="sbp-align">Headline</h3>
 <hr>
 </div>
 <div class="col-sm-6">
 <a href="#">
 <img src="https://placehold.it/250x150" style="padding:10px;">
 </a>
 <h4 class="sbp-align">Subline</h4>
 <p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <hr id="sbp-hr">
 <a href="#">Ansøg nu</a>
 </div>
 <div class="col-sm-6">
 <img src="https://placehold.it/250x150" style="padding:10px;">
 <h4 class="sbp-align">Subline</h4>
 <p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <hr id="sbp-hr">
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

Answer 1

.row [class*="col-"] {
 padding-right: 7.5px;
 padding-left: 7.5px;
}
.padding-twocolumn-bg {
 margin-bottom:30px;
}
.business-left-img a img { 
 width: auto; 
 margin:auto 
}
.business-left {
 padding:75px 75px 40px 75px;
}
.classWithPad { 
 margin:8px; 
 padding:10px; 
 background-color: #fff; 
 border:1px solid #ebecf0;
 
 height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<div class="wrapper">
 <!-- Section 7 -->
 <div class="section padding-twocolumn-bg">
 <div class="row">
 <div class="text-center col-md-6 business-left-img">
 <div class="classWithPad">
 <p class="business-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <a><img src="https://placehold.it/150x150" class="img-responsive"></a>
 <h2>AGA-Tools</h2>
 <p>Name - Position</p>
 <a href="tel[phone]">[phone]</a>
 </div>
 </div>
 <div class="text-center col-md-6">
 <div class="classWithPad">
 <div class="row">
 <div class="col-sm-12">
 <h3 class="sbp-align">Headline</h3>
 <hr>
 </div>
 <div class="col-sm-6">
 <a href="#">
 <img src="https://placehold.it/250x150" style="padding:10px;">
 </a>
 <h4 class="sbp-align">Subline</h4>
 <p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <hr id="sbp-hr">
 <a href="#">Ansøg nu</a>
 </div>
 <div class="col-sm-6">
 <img src="https://placehold.it/250x150" style="padding:10px;">
 <h4 class="sbp-align">Subline</h4>
 <p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <hr id="sbp-hr">
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

You can add

.classWithPad {
 height: 100%;
}

or

.business-left {
 padding: 37px 75px 40px 75px;
}

You can do it in many different ways, by playing with the paddings and margins, but I think the hieght: 100% is the proper way to do it.

• MK-DK: Thank you a lot for the answer @Pain. I cannot see any difference when I add the .classWithPad { height: 100%; }
• Marik Ishtar: I added a snippet check it.
• MK-DK: Ah yes I can see the difference on the fiddle, but not at my livesite
• Marik Ishtar: maybe a cache problem, try hard refresh.
• Marik Ishtar: try add this (#front .padding-twocolumn-bg .row { padding-bottom: 0px }) and add padding-bottom: 30px to .classWithPad