JSFiddle - React, Tailwind, and code Playground

HTML

<header>
</header>
<div class="table">
<div id="wrapper">
    <div id="first_block">
    </div><!-- Close first_block -->
       <div id="center_block">
    </div><!-- Close center_block -->
    <div id="second_block">
    </div><!-- Close second_block -->
    

    
</div> <!-- Close wrapper -->

CSS

header {
    width:100%;
        height:30px;
            border:1px solid black;
}
.table {display: table;
width: 100%;}
#wrapper {
border:1px solid black;
overflow:hidden;
display: table-row;
    
}
#first_block {
    display: table-cell;
    width: 200px;
     border:1px solid black;
       
     background:red;
}
#second_block {
     display: table-cell; 
     border:1px solid black;
   width: 200px;
    background:yellow;      
}
#center_block {
    background:green; 
    display: table-cell; 
     border:1px solid black;
    height: 80px;
}
#first_block, #center_block, #second_block {
}