JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.flex-container {
    max-width:80%;
    margin: 100px auto;
    height:600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1E5655
}
.flex-container:before, .flex-container:after {
    content:'';
    flex:1
}
.flex-container:before {
    order:2
}
.flex-container:after {
    order:5
}
.flex-item {
    width:300px;
    height:50px;
    background-color:#fff;
}
.flex-item:nth-of-type(2) {
    background-color: #eee;
    order:3;
}
.flex-item:nth-of-type(3) {
    background-color: #FFD454;
    order:4
}
.flex-item:nth-of-type(1) {
    align-self: flex-start;
    order:0;
}