HTML thumbnail size issue - html

Question

enter image description here
I have an issue with thumbnail size. In the picture, there should have been another picture in white area in the left-middle, but the space is skipped because an image above has a long title. Everytime a picture with a long title is showed up, the size becomes larger. Is there any way I can fix thumbnail size even though the title gets longer?
Here is my HTML code and CSS i don't write anything.
<div class="panel-body">
<div id="recipeResults" class="row">
<!-- templates/BasicImages/imageTemplates.js -->
</div>
</div>
Here is actual code. Sorry :)
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="hovereffect">
<img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}">
<div class="overlay">
<h3> {{json.hoverDescription}}</h3>
<a class="info" href="#"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>{{json.cookTime}}</a>
</div>
</div>
<div class="caption">
<p style="font-size: 1pt;"> </p>
<h4>{{json.name}}</h4>
<p>{{json.description}}</p>
<p><button type="button" class="btn btn-default btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Save
</button></p>
</div>
</div>
</div>

Answer 1

You can use this code for the box tag (or title tag) in CSS to prevent any over sizing
.class-name{
overflow: hidden;
}
CSS overflow Property

Answer 2

Using Flex you can align children of different height vertically without leaving gaps.
<div id="outer-wrap">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
And the CSS
div#outer-wrap {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100 vw;
}
div#outer-wrap .child {
width: 33.3%;
}