多列响应布局的高度相等

Question

我有一个2列标题，其中一面是图像，另一面分为2列，其中包含文本。在尝试使此页面响应时，我似乎无法使列浓缩到相同的高度。对此最好的方法是什么？

到目前为止我的代码

http://jsfiddle.net/3EGFS/10/

HTML

<div id="top-banner">
<div id="left-sld">
    <img src="http://72.52.242.20/~youngsen/wp-content/uploads/2014/04/truck4.jpg" />
</div>
<div id="service-bx" class="boxes">
    <div class="bx-inner">
        <div class="banner-content">Integer molestie elit vitae leo molestie at bibendum nulla tristique. Nam eros lectus, ulla mcorper eget congue eu.</div>
    </div>
</div>
<div id="industries-bx" class="boxes">
    <div class="bx-inner">
        <div class="banner-content">Nam eros lectus, ullamco rper eget congue eu, scele risque et sem. Fusce non erat nisl. Fusce convallis enim eu sem gravida non egestas.</div>
    </div>
</div>
<div id="emergencies-bx">
    <div class="bx-inner">  
        <div id="emergenies-content">Nam eros lectus, ullamco rper eget congue eu, scele risque et sem. Fusce non erat nisl. Fusce convallis enim eu sem gravida non egestas.</div>
    </div>
</div>

CSS

#top-banner {
clear: both;
overflow: auto;
max-width: 1500px
}
#left-sld {
float: left;
max-width: 870px;
position: relative;    
width: 58%;
}

#left-sld img {
max-width: 100%;
}  

#service-bx {
background-color: yellow;
}

#industries-bx {
background-color: green;
}
#service-bx, #industries-bx {
color: white;
min-height: 341px;
width: 21%;
max-width: 316px;
float: left;
}
.bx-inner {
padding: 23% 20%;
min-height: 171px;
}
#emergencies-bx {
background-color: #a40404;
color: white;
min-height: 250px;
float: left;
width: 42%;
max-width: 632px;
}