Aligning two divs vertically in responsive design

Question

I'm trying to vertically align two divs in responsive design. One div contains an image and the other contains text. I want them to keep aligned for almost all large screen sizes. The heights of both divs must be same on almost all large screens.

here is the link to the fiddle: http://jsfiddle.net/Bangash/4cLQa/

and the html and css is given below.

CSS goes here
.box { float: left; font-size:15px;font-family:'fsl'; }
#main { width: 100%; }
#intro { width: 67%;}
#box-inside1{margin-top:2em;margin-left:2em;}
#slider-small { width: 33%; float:right;position: relative; padding:0; margin:0; }
#left { width: 50%;margin-right:4em;padding-bottom:3px;min-height:256px; }
#right { width: 40%;}

and the HTML goes here

<div class="box" id="main">
<div class="box" id="intro" style="background-color:#eae7e7;">
<div class="box" id="box-inside1">
<h3>IOC OFFICE 600SQM (EPC PROJECT)</h3>
Lead times:
<ul>
<li>Design &ndash; 4 weeks</li>
<li>Procure &ndash; 10 weeks</li>
<li>Construct (Shell and Core) &ndash; 16 weeks</li>
<li>Fit and Furnish &ndash; 16 weeks</li>
</ul>
Components:
<ul>
<li>Pre-fabricated steel structure</li>
<li>300 sqm - Two Levels</li>
<li>Overhead Protection of ground floor</li>
<li>100% local contractors for civil works, construction, fit &amp; furnish</li>
</ul>
<a href="#" id="dl-text">Download floor plan <span id="dl-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></div>
</div>
<div class="box" id="slider-small"><img src="http://atom.norseone.com/wb/media/property/case/1.jpg" width="100%" alt="" /></div>
</div>

Kindly help me out. Thanks

Answer 1

height: 50vw;

or

height: 50vh;

These should be responsive, but try both of them out, as they will do different things. I'm sure one of them is what you are looking for.