JSFiddle - React, Tailwind, and code Playground

HTML

<div class="two-pics">
    <div class="wc-pic-blue pic">
        <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
    </div>
    <div class="wc-pic-pink pic">
        <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
    </div>
    <br style="clear: left;" />
</div>

CSS

.two-pics {
    width: 100%;
}

.wc-pic-blue {
    width: 49%; /* decrease for more space between images */
    box-sizing: border-box;
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    float: left;
    padding: 4%;
    text-align: right;
}

.wc-pic-pink {
    width: 49%; /* decrease for more space between images */
    box-sizing: border-box;
    background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    float: right;
    padding: 4%;
}

.two-pics .pic img {
    max-width: 100%;
}

@media (max-width: 500px) {
    .two-pics .pic {
        width: 100%;
        padding: 8%;
    }
    .two-pics .pic img {
        width: 100%;
    }
}