JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
    1
</div>
<div id="second">
    2
</div>
<div id="third">
    3
</div>
<div id="fourth">
    4
</div>

CSS

html, body {
    margin: 0;
}

#first, #second, #third, #fourth {
    position: absolute;
    top: 0;
    bottom: 0;
}

#first {
    background-color: rgba(255, 0, 0, 0.25);
    width: 50px;
}

div#second {
    background-color: rgba(0, 255, 0, 0.25);
    width: 50px;
    left: 50px;
}

#third {
    background-color: rgba(0, 0, 255, 0.25);
    left: 125px;
    right: 50px;
}

div#fourth {
    background-color: rgba(255, 0, 255, 0.25);
    width: 50px;
    right: 0;
}