JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div class="container">
    <div class="item-container">
        <div class="item">
            <img alt="1" />
            <p>90's literally try-hard Pinterest, Helvetica migas craft beer. Tilde Tumblr meditation pop-up, Blue Bottle roof party Wes Anderson mustache Schlitz.90's literally try-hard Pinterest, Helvetica migas craft beer. Tilde Tumblr meditation pop-up, Blue Bottle roof party Wes Anderson mustache Schlitz.</p>
        </div>
    </div>
    <div class="item-container">
        <div class="item">
            <img alt="2" />
            <p>90's literally try-hard Pinterest, Helvetica migas craft beer. Tilde Tumblr meditation pop-up, Blue Bottle roof party Wes Anderson mustache Schlitz.</p>
        </div>
    </div>
    <div class="item-container">
        <div class="item">
            <img alt="3" />
            <p>90's literally try-hard Pinterest, Helvetica migas craft beer. Tilde Tumblr meditation pop-up, Blue Bottle roof party Wes Anderson mustache Schlitz.</p>
        </div>
    </div>
</div>

CSS

html, body {
    display: block;
    height: 100%;
    width: 100%;
}

.container {
    display: flex;
    flex-flow: row wrap;
    height: 100%;
}

.container:after {
    content: '';
    order: 3;
}

.item-container,
.container:after {
    flex: 1 1 50%;
}

.item-container:first-child {
    flex: 0 0 50%;
}

.item {
    background: rgba(200, 200, 200, 0.5);
    margin: 1rem;
}

.item-container:nth-child(1) {
    order: 1;
}
.item-container:nth-child(2) {
    order: 2;
}
.item-container:nth-child(3) {
    order: 4;
}

img {
    background: black;
    height: 72px;
    position: relative;
    width: 100%;
}

img:before {
    color: white;
    content: attr(alt);
    display: inline-block;
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}