JSFiddle - React, Tailwind, and code Playground

by Chris Purves

HTML

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

CSS

#container {
        display: flex;
        flex-wrap: wrap;
        height: 500px;
        width: 500px;
    }
    #one, #two, #four, #five {
        flex: 1 1 49%;
    }
    #three {
        flex: 1 1 99%;
        background-color: blue;
        height: 15px;
        max-height: 15px;
    }
    #one {
        background-color: green;
    }
    #two {
        background-color: yellow;
    }
    #four {
        background-color: orange;
    }
    #five {
        background-color: violet;
    }