I am trying to figure out how best to handle the following case of responsive design.

I need the text box to the side of the beer image to grow / shrink it's width, but maintain the height to match the height of the beer image. At a certain breakpoint I will have that text box move under the beer image.

```html
.beer-content {
  padding: 50px 68px;
}
.amber-beer {
  float: left;
}
.amber-beer img {
  margin-top: -21px;
}
.amber-beer-text {
  float: left;
  height: 374px;
  background: #f8eddf;
  margin: 0 0 0 20px;
  max-width: 725px;
  width: 100%;
  padding: 50px 50px 0 50px;
  font-size: 18px;
}
```

```html
<div class="beer-content">
    <div class="amber-beer"><img src="_img/beer-amber-ale.png" alt="Amber Ale" /></div>
    <div class="amber-beer-text">
        <p class="beer-title"><img src="_img/beer-title-bars.png" alt="" /> Amber</p>
        <p>Amber beers are a style that fall between light pale ales and brown ales. They are generally categorized as pale ale. This beer is dark amber in colour, has traces of citrus in its aroma, and one can pick up hints of caramel and coffee in its full bodied flavour. Though it is fairly well hopped (32ibu), the robust character and complexity of this fine amber turns it into nectar of the gods that no serious beer drinker should pass up.</p>
        <div class="beer-circle">
            <span>OG</span>
            1052
        </div>
        <div class="beer-circle">
            <span>ABV</span>
            5%
        </div>
        <div class="beer-circle">
            <span>SRM</span>
            12
        </div>
        <div class="beer-circle">
            <span>IBU</span>
            32
        </div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>  
</div>
```