JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="top-center"></div>
    </div>

    <div class="bottom"></div>

CSS

.top{
width:500px;
margin:0 auto;
background:#999;
overflow:hidden;
}

.top-left{
float:left;
height:280px;
width:23px;
background:green;
}

.top-center{
height:280px;
width:980px;
}

.top-right{
float:right;
width:23px;
height:280px;
background:green;
}

.bottom{
width:454px;
height:200px;
margin:0 auto;
background:#ccc;
}