title: Bootstrap Responsive Product Grid
body: <p>I am building a product grid built upon AngularJS data - where there will be <strong>images and product details (text)</strong></p>
  
  <p>The <strong>text</strong> sometimes extends to the 2nd line, causing havoc.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div data-ng-repeat="s in Results"&gt;
          &lt;div class="col-xs-4"&gt;
              &lt;a href="#" class="thumbnail"&gt;
                  &lt;div&gt;
                      &lt;img ng-src="{{s.ProductImage}}" class="img-responsive"&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      {{s.Store}} {{s.Category}} {{s.ProductName}}
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="clearfix visible-xs-block"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/dzJAj.png" alt="enter image description here"></p>
  
  <p>How do I fix it so that <code>&lt;div&gt;</code>s all have the same height? 
  I tried to look online for solutions, but I think I am 50% there. Please help.</p>
  
  <p><strong>Note: I Don't want to hide content.</strong></p>