title: Trouble resizing bootstrap 3 box to fit with image
body: <p>Please see the first image below.</p>
  
  <p><img src="https://i.stack.imgur.com/VdwzU.jpg" alt="enter image description here"></p>
  
  <p>This is working great and is how I want it to look. However when the browser resizes it then looks like this.</p>
  
  <p><img src="https://i.stack.imgur.com/tBxkF.jpg" alt="enter image description here"></p>
  
  <p>As you can see the white background of the text block is bigger than of the image block. I want the image block to be the same height as the text block but unfortunately this is not working. I am using Bootstrap 3 to develop this and you can see my code for this below:</p>
  
  <pre><code>        &lt;div class="row" style="margin-bottom:30px;"&gt;
            &lt;div class="col-xs-12"&gt;
                &lt;div class="col-sm-3" style="padding:0;"&gt;
                  &lt;img src="core/img/abb[square].jpg" class="img-responsive"&gt;
                &lt;/div&gt;
  
                &lt;div class="col-sm-9" style="background:#fff; height:218px; padding:7px 25px;"&gt;
                  &lt;h2&gt;&lt;a class="a-cl"&gt;Page title&lt;/a&gt; &lt;small&gt;2.1 miles away&lt;/small&gt;&lt;/h2&gt;
  
                  &lt;p&gt;Text content, summary of page here.&lt;/p&gt;
  
                  &lt;a href="#" class="btn btn-success"&gt;Subscribed &lt;i class="glyphicon glyphicon-ok" style="margin-left:4px;"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;/div&gt;    
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be much appreciated. As you can see I have manually defined the height on <code>&lt;div class="col-sm-9"&gt;</code> and set <code>height:218px</code>. This obviously will not work dynamically as the page resizes.</p>
  
  <p><strong>Summary: I am looking for an effective way of making sure the height of the text block is the same as the image block using bootstrap 3.</strong></p>