JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-container">
    <div class="middle">
          <div class="slider1"></div>
          <div class="slider2"></div>
   </div>
   <div class="left">
          <div></div>
          <div></div>
   </div>
   <div class="right">
          <div></div>
          <div></div>
   </div>
</div>

CSS

/* Container */
#content-container{
    background:white;
    margin-top:10px;
    margin-bottom:10px;
    height:600px;
}

/* follow container height*/
.left,.right,.center{
    height:100%;
}

.left{
    float: left; 
    width: 23%; 
    border:1px solid red;
}
.right{
    float: right; 
    width: 23%; 
    border:1px solid red;
}
.center{ 
     display: inline-block; 
     width: 53%; 
     border:1px solid red;
}


/* Sliders */
.slider1 { 
        height: 50px;
        border:1px solid blue;
        overflow: hidden;
        float: left;
        background: blue;
}
.slider2 {  

        height:50px; 
        border:1px solid green;
        overflow: hidden;
        background: red;
}