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

Question

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://placehold.it/640x420" />
    </div>
    <div class="small">
        <img src="http://placehold.it/320x200" />
    </div>
    <div class="small">
        <img src="http://placehold.it/320x200" />
    </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: https://jsfiddle.net/u8kksgbq/12/

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

Answer 1

Thanks for your answers. This my final solution:

<section id="contact-pics">
    <div class="pic-large">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>

    <div class="v-spacer">
        <div class="dummy"></div>
        <div class="pic-content">
        </div>
    </div>

    <div class="pic-small">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>

    <div class="h-spacer">
        <div class="dummy"></div>
        <div class="pic-content">
        </div>
    </div>

    <div class="pic-small">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>  
</section>

And the CSS:

#contact-pics {

    img {
        width: 100%;
        height: auto;
    }

    overflow: auto;

    .pic-large {
        display: inline-block;
        position: relative;
        width: 65.99%;
        float:left;

        .dummy {
            padding-top: 62%;
        }
    }

    .pic-small {
        display: inline-block;
        position: relative;
        width: 32.8%;
        float:left;

        .dummy {
            padding-top: 62%;
        }
    }

    .v-spacer {
        display: inline-block;
        position: relative;
        width: 1.2%;
        float:left;

        .dummy {
            padding-top: 2535%;
        }
    }

    .h-spacer {
        display: inline-block;
        position: relative;
        width: 32.333333%;
        float:left;

        .dummy {
            padding-top: 2.4%;
        }
    }

    .pic-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;       
    }
}

Guess there are easier solutions, but this one definitely works :-)