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:134px;
}

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

span{
display:table-cell;
height:134px;
}

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

#left1 {float:left;background:yellow;width:277px;min-width:277px;max-width:277px;height:134px}

#right2 {float:right;width:277px;min-width:277px;max-width:277px;height:134px;background:yellow;}