Responsive vertical align for three equal boxes with CSS - html

Question

I'm using Bootstrap and would like to have three boxes of the same height align vertically.
Here you can see those three blocks, however I need them to be of equal height that will occupy maximum space. I can manually add some padding so it looks like that:
However when the block becomes smaller (bootstrap's grid) it breaks.
Any ideas?
Here's CSS code I'm using and HTML layout.
.caption {
height: 150px;
overflow: hidden;
position: relative;
padding: 0!important;
}
.caption-info{
width: 70%;
height: 100%;
display: inline-block;
padding: 9px;
}
.caption-flag:hover{
background: rgba(235, 75, 75, 1);
transition: background 0.2s ease;
}
.caption-flag{
cursor: help!important;
transition: background 0.2s ease;
position: absolute;
background: rgba(235, 75, 75, 0.75);
color: white;
font-weight: bold;
width: 100%;
text-align: center;
top: 20px;
z-index: 9999;
font-size: 20px;
}
.caption-info h4 { margin-top: 5px; margin-bottom:5px;}
.caption-prices{
width: 32%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
text-align: center;
}
.caption-prices h4{
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
}
.caption-square, .caption-cost, .caption-total{
box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
padding-left: 0!important;
color: white;
font-size: 0.85em;
padding: 5.5px;
}
.caption-square{
background: green;
}
.caption-cost{
background: orange;
}
.caption-total{
background: red;
}
.thumbnail {
padding: 0;
position: relative;
}
<div class="row">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<div class="caption-info">
<h4>Product Title</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="caption-prices">
<div class="caption-square">
площадь
<h4>$24.99</h4>
</div>
<div class="caption-cost">
цена за м<sup>2</sup>
<h4>$24.99</h4>
</div>
<div class="caption-total">
стоимость
<h4>$24.99</h4>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Change this rule
.caption-square, .caption-cost, .caption-total{
box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
padding-left: 0!important;
color: white;
font-size: 0.85em;
padding: 5.5px;
height: 33%; /* added */
box-sizing: border-box; /* added */
}
Sample snippet
.caption {
height: 150px;
overflow: hidden;
position: relative;
padding: 0!important;
}
.caption-info{
width: 70%;
height: 100%;
display: inline-block;
padding: 9px;
}
.caption-flag:hover{
background: rgba(235, 75, 75, 1);
transition: background 0.2s ease;
}
.caption-flag{
cursor: help!important;
transition: background 0.2s ease;
position: absolute;
background: rgba(235, 75, 75, 0.75);
color: white;
font-weight: bold;
width: 100%;
text-align: center;
top: 20px;
z-index: 9999;
font-size: 20px;
}
.caption-info h4 { margin-top: 5px; margin-bottom:5px;}
.caption-prices{
width: 32%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
text-align: center;
}
.caption-prices h4{
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
}
.caption-square, .caption-cost, .caption-total{
box-shadow: inset 10px 0px 20px -10px rgba(0,0,0,0.5);
padding-left: 0!important;
color: white;
font-size: 0.85em;
padding: 5.5px;
height: 33%;
box-sizing: border-box;
}
.caption-square{
background: green;
}
.caption-cost{
background: orange;
}
.caption-total{
background: red;
}
.thumbnail {
padding: 0;
position: relative;
}
<div class="row">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<div class="caption-info">
<h4>Product Title</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="caption-prices">
<div class="caption-square">
площадь
<h4>$24.99</h4>
</div>
<div class="caption-cost">
цена за м<sup>2</sup>
<h4>$24.99</h4>
</div>
<div class="caption-total">
стоимость
<h4>$24.99</h4>
</div>
</div>
</div>
</div>
</div>
</div>