JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <span>
        <div id="left1"></div>
        <div id="left2"></div>
    </span>
    <span class="fix"></span>
    <span>
        <div id="right1"></div>
        <div id="right2"></div>
    </span>
</div>

CSS

html,body{
margin:0;
padding:0;
height:100%;
}

.wrap{
display:table;
width:100%;
height:100%;
}

span{
display:table-cell;
height:100%;
}

span:nth-child(odd){
background:blue;
width:30%;
}
.fix {width:200px;min-width:200px;max-width:200px;background:red}

#left1 {float:left;background:yellow;width:30px;min-width:30px;max-width:30px;height:100%}

#right2 {float:right;width:30px;min-width:30px;max-width:30px;height:100%;background:yellow;}