JSFiddle - React, Tailwind, and code Playground

HTML

<div id="herp">
    <div class="derp">
        <p><img src="http://pressupinc.com/wp-content/uploads/2013/09/100_0394.jpg" /></p>
        <p><img src="http://pressupinc.com/wp-content/uploads/2013/09/100_0399.jpg" /></p>
        <p><img src="http://pressupinc.com/wp-content/uploads/2013/09/100_0401.jpg" /></p>
    </div>
    <div class="derp">
        <div class="hello"><div>Hello</div></div>
        <p><img src="http://pressupinc.com/wp-content/uploads/2013/09/100_0397.jpg" /></p>
        <p><img src="http://pressupinc.com/wp-content/uploads/2013/09/100_0398.jpg" /></p>
    </div>
</div>

CSS

.derp p, div.hello {
    float: left;
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    margin: 1%;
    overflow: hidden;
    background:#e8e6e6;
}

.derp img, .derp div.hello div {
    min-width: 90%;
    height: 90%;
    padding:5%;
}