JSFiddle - React, Tailwind, and code Playground

by Khalil Zhang

HTML

<div class="flex-container">
    <div class="flex-item aside">aside</div>
    <div class="flex-item content">content</div> <div class="flex-item aside">aside</div>
</div>

CSS

.flex-container {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    flex: 1 100%;
    background: tomato;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

.aside {
    flex: 1 auto;
}
.content {
    flex: 2 0px;
    background-color:gray;
}