Perfectly Align 1 large Image with 2 small ones next two it in a flexible container

I want to achieve a flexible container with three images. One large one the left, two smaller ones (roughly one quarter of the size) aligned to the right of it:

When resizing the browser window, I want the three images to adjust accordingly while keeping the original proportions so the large image's baseline keeps aligned with the lower small image's baseline.

So far, I've tried the following code:

<div id="space">
    <div id="large">
        <img src="http://ift.tt/1OBrDb7" />
    </div>
    <div class="small">
        <img src="http://ift.tt/1yrowys" />
    </div>
    <div class="small">
        <img src="http://ift.tt/1yrowys" />
    </div>
</div>


#space {
    width:100%;
}
#large {
    width:60%;
    float:left;
    margin:1% 1%;
    padding:0px;
}
.small {
    width:30%;        
    float:left;
    margin:1% 1%;
    padding:0px;
}
img {
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

In case the images are slightly higher than the proportions allow, the images should be vertically centered in the respective container, the overflow should be hidden.

You can find this code on JSFIDDLE: http://ift.tt/1OBrDrn

Please help - I've been trying and trying and don't find a solution.