JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <img src="//placehold.it/100x80/ffaaaa" alt="">
    <img src="//placehold.it/100x80/aaaaff" alt="">
</div>

CSS

.foo img {
    width: 45%;
}
.foo img:first-child {
    float: right;
}

@media only screen 
and (min-width : 420px) {
    .foo img {
        width: 250px;
    }
    
    .foo img:first-child {
        float: none;    
    }
}