JSFiddle - React, Tailwind, and code Playground

HTML

<div class="two-pics">
    <div class="pic">
        <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-s.jpg" alt="">
       <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg" alt="">
	</div>
    <div class="pic">
    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg" alt="">
	    <img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg" alt="">
    </div>
</div>

CSS

.two-pics {
    display: flex;
    justify-content: space-around;
}

.pic {
    position: relative;
}

img:first-child {
    height: 30vw;
}

img:last-child {
    height: 25vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media ( max-width: 600px ) {
    .two-pics { flex-direction: column; align-items: center; }
    
}