JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<div class="container">
    <div class="container2">
        <div class="left-col">
            width = 100px<br>
            left-col
        </div>
        <div class="center-col">
            width = 100% - 100px -100px<br>
            center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col 
            center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col 
        </div>
    </div>
</div>   
<div class="right-col">
    width = 100px<br>
    right-col
</div>

CSS

* {margin:0; padding:0; font-family:Arial, Tahoma, Helvetica, sans-serif;}

.right-col {background:#ffa;}
.left-col {background:#faa;}
.center-col {background:#faf;}

.container {float:left; width:100%; margin-right:-100px;}
.container2 {margin-right:110px;}
.left-col  {float:left; width:100px; display:inline;}
.center-col {margin-left:110px; }
.right-col {float:right; width:100px;}