2 column grid, multiple rows in one. How do I make them equal in height? - height

Question

I'd like to put 3 images next to one image in a responsive row layout but I can't figure out how to make the contents of this row to be equal in height. I can make the images any dimension if it's as simple as "The large image should be 900x1200px, the 3 small ones should be 300x500px" I am also using foundation4 for this as well. The images could be cropped or stretched a little too.
http://jsfiddle.net/uEyCF/2/
<div id="image_box">
<div class="col">
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
</div>
<div class="col">
<img src ="http://placehold.it/200x350" />
</div>
</div>

Answer 1

This should get you started:
<div id="image_box" class="row">
<div class="small-6 large-6 columns left-col">
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
</div>
<div class="small-6 large-6 columns">
<img src="http://placehold.it/200x340" />
</div>
</div>
<style type="text/css">
.left-col img { margin-bottom:20px; float:right;}
</style>