JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="nv1"><span><--- Use resizer</span></div>
    <div id="nv2">&nbsp;</div>
    <div id="nv3">&nbsp;</div>
    <div id="extra">
        <span>SPAAAAAAAACE</span>
    </div>
    
    <div id="debugger">
        <div class='v1'>nv1 width: <span></span></div>
        <div class='v2'>nv2 width: <span></span></div>
        <div class='v3'>nv3 width: <span></span></div>
        <div class='extra'>extra width: <span></span></div>
        <div class='c1'>$(window).width(): <span></span></div>
        <div class='c2'>$(document).width(): <span></span></div>
        <div class='info'>Empty space: <span></span></div>
    </div>
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: black;
    clear: both;
}

#wrapper{
    clear: both;
    height: 100%;
    min-width:600px; 
    width: auto !important; 
    width: 600px;
    margin: 0;
    padding: 0;
}

#nv1, #nv2, #nv3{
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 0;
    float:left;
}

#nv1{
    background: red;
}

#nv2{
    background: green;
}

#nv3{
    background: blue;
}

#extra{
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    background: black;
    text-align: center;
    overflow: hidden;
}

#nv1 span{
    position: relative;
    top: 50%;
    left: 50;
    height: 200px;
    margin-top: -100px;
}

#extra span{
    color: white;
    position: relative;
    top: 50%;
    left: 50;
    height: 200px;
    margin-top: -100px;
}

#debugger{
    position: fixed;
    width: 200px;
    bottom: 0;
    right: 0;
    background: white;
    border: 1px solid black;
    padding: 6px;
}

#debugger span{
    float:right;
}

JavaScript

checkThis();

$(document).mousemove(checkThis).mouseout(checkThis);
$(window).resize(checkThis);

function checkThis(){
    var nv1w = $("#nv1").outerWidth(),
        nv2w = $("#nv2").outerWidth(),
        nv3w = $("#nv3").outerWidth(),
        extra,
        space = $(document).width()-nv1w-nv2w-nv3w;
    
    if(space <= 0){
        $("#extra").width(0).hide();
    }
    else{
        $("#extra").width(space).show();
    }
    
    extra = $("#extra").outerWidth()
            
    $("#debugger .v1 span").text(nv1w);
    $("#debugger .v2 span").text(nv2w);
    $("#debugger .v3 span").text(nv3w);
    $("#debugger .extra span").text(extra);
    $("#debugger .c1 span").text($(window).width());
    $("#debugger .c2 span").text($(document).width());
    $("#debugger .info span").text(space);
}