title: HTML thumbnail size issue
body: <p><a href="https://i.stack.imgur.com/xrwrE.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>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?</p>
  
  <p>Here is my HTML code and CSS i don't write anything.</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
    &lt;div id="recipeResults" class="row"&gt;
      &lt;!-- templates/BasicImages/imageTemplates.js --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is actual code. Sorry :)</p>
  
  <pre><code>&lt;div class="col-sm-6 col-md-4"&gt;
    &lt;div class="thumbnail"&gt;
      &lt;div class="hovereffect"&gt;
        &lt;img class="img-responsive center-block" src="{{json.url}}" alt="{{json.alt_name}}"&gt;
          &lt;div class="overlay"&gt;
             &lt;h3&gt; {{json.hoverDescription}}&lt;/h3&gt;
             &lt;a class="info" href="#"&gt;&lt;i class="fa fa-clock-o fa-fw" aria-hidden="true"&gt;&lt;/i&gt;{{json.cookTime}}&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="caption"&gt;
        &lt;p style="font-size: 1pt;"&gt;&amp;nbsp;&lt;/p&gt;
        &lt;h4&gt;{{json.name}}&lt;/h4&gt;
        &lt;p&gt;{{json.description}}&lt;/p&gt;
        &lt;p&gt;&lt;button type="button" class="btn btn-default btn-sm" aria-label="Left Align"&gt;
          &lt;span class="glyphicon glyphicon-star" aria-hidden="true"&gt;&lt;/span&gt; Save
          &lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>