JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

CSS

body, html,div{
    margin:0;
    padding:0;
    color:white;
}
.div1{
    background:red;
    height:300px;
    float:left;
}
.div2{
    margin:0 auto;
    width:400px;
    height:300px;
    background:black;
    float:left;
}

.div3{
    background:blue;
    height:300px;
    float:right;
}

JavaScript

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
    $('.div1, .div3').text(rem/2); 
    $('.div2').text(ww-rem); 
}
calc();
$(window).resize(calc);