JSFiddle - React, Tailwind, and code Playground
HTML
<div id="left-side">Left blah blah balh</div>
<div id="content">Fluid centre</div>
<div id="right-side">Right yep</div>
CSS
#left-side {
float:left;
width:auto;
max-width:300px;
background:red;
}
#content {
float:left;
background:blue;
}
#right-side {
float:left;
width:auto;
max-width:300px;
background:pink;
}
JavaScript
var content = document.getElementById('content'),
left = document.getElementById('left-side').offsetWidth + 20,
right = document.getElementById('right-side').offsetWidth + 20,
total = left + right;
function resize() {
content.style.width = (window.innerWidth-total) + "px";
}
resize();
window.onresize = resize;