JSFiddle - React, Tailwind, and code Playground

by reggi

HTML

<div id="header">
    <div id="container" class="window_width">
        <div id="top" class="window_width">
            <div id="left">
                1
            </div><!--end left-->
            <div id="middle">
                2
            </div><!--end middle-->
            <div id="right">
                3
            </div><!--end right-->
        </div><!--end top-->
        <div id="bottom" class="window_width">
            <div id="left">
                4
            </div><!--end left-->
            <div id="right">
                5
            </div><!--end right-->
        </div><!--end bototm-->
    </div><!--end container-->
</div><!--end header-->

CSS

body, html{padding:0px;margin:0px;background:black}
#header{width:100%; background:gray;float:left;display:inline}
#container {margin:auto}
#container div {float:left;display:inline}
#top #left {width:100px;background:red}
#top #right {width:100px;background:green}
#top #middle {background:blue}
#bottom #left {background:purple}
#bottom #right {width:100px;background:blue}

JavaScript

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