Trouble resizing bootstrap 3 box to fit with image - html

Question

Please see the first image below.
This is working great and is how I want it to look. However when the browser resizes it then looks like this.
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:
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-12">
<div class="col-sm-3" style="padding:0;">
<img src="core/img/abb[square].jpg" class="img-responsive">
</div>
<div class="col-sm-9" style="background:#fff; height:218px; padding:7px 25px;">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok" style="margin-left:4px;"></i>
</div>
</div>
</div>
Any help would be much appreciated. As you can see I have manually defined the height on <div class="col-sm-9"> and set height:218px. This obviously will not work dynamically as the page resizes.
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.

Answer 1

Okay, this is with intrinsic ratios, it's not like the comments I made. However, the comment about the rows and columns and nesting are correct.
DEMO: http://jsbin.com/zodama/1/
http://jsbin.com/zodama/1/edit
Requires: jquery.matchHeight-min.js
https://github.com/liabru/jquery-match-height
jQuery (when the script is installed):
$(document).ready(function() {
$('.my-row [class*="col-"]').matchHeight();
});
The CSS, some of which is the aspect ratio and some of which is Bootstrap grid manipulation based on intimate knowledge of how it works.
.my-row {
border: 10px solid #ddd;
margin-left: 0;
margin-right: 0;
margin-bottom: 3%;
text-align: center;
}
.image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.my-row [class*="col-"] {
padding:0 0 10px 0;
}
#media (min-width:768px) {
.my-row {
border: 10px solid #ddd; /* remove this it's in the global */
text-align: left;
}
.my-row [class*="col-"] {
padding: 0;
min-height: 220px;
}
.my-row [class*="col-"]:last-child {
padding-left: 20px;
padding-bottom: 20px;
}
.image img {
display: block;
width: 100%;
height: 100%;
margin: auto;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.image img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.image {
position: relative;
height: 0;
padding-top: 56.25%;
}
}
#media (min-width:992px) {
.my-row [class*="col-"] {
min-height: 250px;
}
}
#media (min-width:1200px) {
.my-row [class*="col-"] {
min-height: 275px;
}
}
HTML
<div class="container">
<div class="row my-row">
<div class="col-sm-4 col-md-3 image">
<img src="http://lorempixel.com/320/320/sports"/>
</div>
<div class="col-sm-8 col-md-9">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok"></i>
</div>
</div>
<div class="row my-row">
<div class="col-sm-4 col-md-3 image">
<img src="http://lorempixel.com/320/320/city"/>
</div>
<div class="col-sm-8 col-md-9">
<h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
<p>Text content, summary of page here.</p>
Subscribed <i class="glyphicon glyphicon-ok"></i>
</div>
</div>