JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div class="flexWrapper">
    <div class="flex">
        <img class="exampleImg0" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" />
    </div>
    <div class="flex">
        <img class="exampleImg1" src="http://placehold.it/240x320/fff/000.png&text=240x320" />
    </div>
</div>

CSS

html {
    box-sizing: border-box;
    font: 700 16px/1.5 Consolas;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
.flexWrapper {
    margin: 2em auto;
    max-width: 38em;
    page-break-inside: avoid;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.flex {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    overflow: none;
    outline: 3px solid red;
    flex: 0 1 auto;
}
.exampleImg0, .exampleImg1 {
    max-height: 20em;
    width: 100%;
    height: 100%;
    display: block;
}
@media screen and (max-width:37em) {
    .flexWrapper {
        flex-direction: column;
        align-items: center;
    }
}