html - Responsive - resize DIV width while maintaining height -

i trying figure out how best handle following case of responsive design.

i need text box side of beer image grow / shrink it's width, maintain height match height of beer image. @ breakpoint have text box move under beer image.

.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;  }

<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 style fall between light pale ales , brown ales. categorized pale ale. beer dark amber in colour, has traces of citrus in aroma, , 1 can pick hints of caramel , coffee in full bodied flavour. though hopped (32ibu), robust character , complexity of fine amber turns nectar of gods 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>

you should remove fixed height , add padding bottom well. , add min-height if want minimum height match image's height.

.amber-beer-text {     float: left;     min-height: 374px;     background: #f8eddf;     margin: 0 0 0 20px;     max-width: 725px;     width: 100%;     padding: 50px;     font-size: 18px; }