JSFiddle - React, Tailwind, and code Playground

by reggi

HTML

<div id="container">
    <div id="left">
        1
    </div>
    <div id="middle">
        2
    </div>
    <div id="right">
        3
    </div>   
</div>

CSS

#container {}
#container div {float:left;display:inline}
#left {width:100px;background:red}
#right {width:100px;background:green}
#middle {background:blue}

JavaScript

$(document).ready(function() {
    function resizeFrame() {
        $("#container").width($(window).width() - 50);
        $("#middle").width($("#container").width() - $("#left").width() - $("#right").width());
        var contentwidth = $("#middle");
        if ((contentwidth) < '300') {
            $("#middle").css("visibility", "hidden");
        } else {
            $("#middle").css("visibility", "visible");
        }
    }
    resizeFrame();
    $(window).bind("resize", function() {
        resizeFrame();
    });
});