JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="beforeafterpics">
<li><img class="ba-bg" src="https://s-media-cache-ak0.pinimg.com/736x/8f/46/11/8f461108d044f56486b2980b40d62ef2.jpg" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
<li><img class="ba-bg" src="https://s-media-cache-ak0.pinimg.com/736x/8f/46/11/8f461108d044f56486b2980b40d62ef2.jpg" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
<li><img class="ba-bg" src="https://s-media-cache-ak0.pinimg.com/736x/8f/46/11/8f461108d044f56486b2980b40d62ef2.jpg" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
<li><img class="ba-bg" src="https://s-media-cache-ak0.pinimg.com/736x/8f/46/11/8f461108d044f56486b2980b40d62ef2.jpg" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
</ul>

CSS

@media only screen and (max-device-width : 1024px) {
    .ba-bg {
        width: 50%;
    }
    li.nth-child(2):after {
        content:"\a"; white-space:pre; 
    }
}.beforeafterpics {
text-align: center;
}
.beforeafterpics li{
display: inline-block; 
list-style-type: none;
}
.ba-bg {background-color: #FFFFFF; 
border: 1px solid rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
padding: 4px;
}