Column height responsive to text - css

Question

I want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.
This is the error that I get:
http://prntscr.com/d4getm
This is the code that I have:
<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><?php the_post_thumbnail(array(100, 100)); ?>
<div class="caption">
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><?php the_title(); ?></h3>
<!--// Repeat the process and reset once it hits the limit-->
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
And this is the CSS:
div.caption{
text-align: center;
}
div.thumbnail{
border: 4px inset black;
height: 200px;
}
h3.center{
font-size: 20px;
}

Answer 1

The answer is found here: How can I make Bootstrap columns all the same height?
For this particular problem some adjustments need to be made to the html structure in order to get it to work.
I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/
UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/
Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.
I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.
Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/
You'll need to work out the bottom border though.