JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="left_border"></div>
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
    <div id="right_border"></div>
</div>

CSS

#container{
    width:100%;
    height:500px;
    position:relative;
}

#container div{
    height:500px;
    position:absolute;
    top:0;
    bottom:0;
}

#left_border{
    background-color:blue;
    left:0;
    right:50%;
    margin-right:200px
}
#left{ 
    background-color:green;
width:50px;
    left:50%;
    margin-left:-200px;
}
#content{
    width:300px;
    left:50%;
    margin-left:-150px;
    background-color:yellow;
}
#right{
    background-color:green;
    width:50px;
    left:50%;
    margin-left:150px;
}
#right_border{ 
    background-color:blue;
    right:0;
    left:50%;
    margin-left:200px
}