JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
        Header
    </div>
<div id="container">
    <span id="leftcol">
         Text1
    </span>
   
    <div id="centercol">
        Text2
    </div>
     <span id="rightcol">
        Text3
    </span>  
</div>
   <div id="footer">
        Footer
    </div>

CSS

#container {
    overflow:hidden;
    width: 100%;
    display:table;
}

#leftcol {
    border: 1px solid #0f0;
    display:table-cell;
    width: 200px;
}

#rightcol {
    border: 1px solid #0f0;
    display:table-cell;
    width: 250px;
}

#centercol {
    border: 1px solid #000;
    overflow: hidden;
    display:table-cell;
}

#header {
    border: 1px solid pink;
    width: 100%;
}

#footer {
    border: 1px solid pink;
    width: 100%;
}