JSFiddle - React, Tailwind, and code Playground

HTML

<div class="r"> left </div>
<div class="center"> center</div>
<div class="l"><div style="float:right;"> right</div></div>

CSS

.center{
    width:500px;
    height:200px;
    float:left;
    background:transparent;
    margin:auto;
    z-index:99999;
    position:relative;
    margin-left:-250px;/* 250 is half of center div width*/
}
.r{
    width:50%;
    height:200px;
    background:blue;
    float:left;
    z-index:-1;
}
.l{
    dir:rtl;
   width:50%;
    height:200px;
    background:blue;
    float:left;
    z-index:-1;
    margin-left:-250px;/* 250 is half of center div width*/
}