JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item one">♠</div>
    <div class="flex-item two">♣</div>
    <div class="flex-item three">♥</div>
</div>

CSS

.flex-container {
    display: flex;
    height: 300px;
    color: #fff;
    font-size: 4em;
    flex-flow: column wrap;
}
.flex-item {
    height: auto;
    padding: 20px;
    text-align: center;
    align-items: center;
}
.one {
    background: #508694;
    margin-right: 10px;
    flex: 1 1 100%;
    order: 1;
}
.two {
    background: #BB844C;
    margin-bottom: 10px;
    flex: 1 1 0;
    order: 2;
}
.three {
    background: #929D79;
    flex: 1 1 0;
    order: 3;
}