JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="row">
        <div id="one"></div>
        <div id="two"></div>
    </div>
    <div class="row">
        <div id="three"></div>
    </div>
    <div class="row">
        <div id="four"></div>
        <div id="five"></div>
    </div>
</div>

CSS

#container {
    display: flex;
    flex-wrap: nowrap;
    height: 500px;
    width: 500px;
    flex-direction:column;
}
.row {
    flex:1 0 auto;
    display:flex;
    flex-direction:row;
}
.row:nth-child(2) {
    height: 15px;
    max-height: 15px;
}

.row div {
    flex:1 0 auto;
}
#one {
    background-color: green;
}
#two {
    background-color: yellow;
}

#three {
    background-color: blue;
}
#four {
    background-color: orange;
}
#five {
    background-color: violet;
}