JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentwrapper">
    <div id="a">a</div>
    <div id="rw">rw</div>
    <div id="x">X</div>
</div>

CSS

#contentwrapper {
        height: 100%;
        position: absolute;
    }
    #a, #rw, #x {
        position: relative;
        float: left;
    }
    #a {
        border: #ED1C24 3px solid;
        display: inline-block;
        width: 200px;
        height: 100%;
    }
    #rw {
        display: inline-block;
        border: #FF7F27 3px solid;
        width: 200px;
        height: 50%;
    }
    #x {
        border: #7092BE 3px solid;
        display: block;
        width: 200px;
        height: 50%;
    }