JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="left">...</div>
    <div id="right">...</div>
    <div id="main"></div>
</div>

CSS

#wrapper{
    display:block;
    position:relative;
    width:300px;
    border:1px solid black;
    background:white;
}
#left{
    display:block;
    position:relative;
    width:50%;
    height:100px;
    background-color:orange;
    float:left;
}
#right{
    display:block;
    position:absolute;
    width:50%;
    height:100%;
    background-color:#ccc;
    right:0;
}
#main{
    display:block;
    position:relative;
    float:left;
    clear:left;
    width:50%;
    height:50px;
    background-color:blue;
}
#wrapper:after{
    display:block;
    width:100%;
    clear:both;
    content:'';