JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

CSS

body {
    width:100%;
    padding:0;
    margin:0;
}
#left {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    width:170px;
    border:20px solid red;
    background:blue;
}
#middle {
    position:fixed;
    left:170px;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-right:10px solid blue;
    border-top:20px solid blue;
    border-bottom:20px solid blue;
    background:yellow;
}
#right {
    float:right;
    height:1400px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-top:20px solid orange;
    border-bottom:20px solid orange;
    border-right:20px solid orange;
    border-left:10px solid orange;
    background:green;
}

JavaScript

function elasticCol() {

     $('#middle').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });

 $('#right').outerWidth(function () {
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth() / 2;
 });
 }
 elasticCol();

 $(window).on('resize', function () {
     elasticCol();
 });