JSFiddle - React, Tailwind, and code Playground

by madprops

HTML

<div id="leftblockreal" style="border: 0px solid blue"> 
    left
</div>

<div id="container" style="border: 1px solid blue">
    
    <div id="leftblockfake" style="border-left: 0px solid blue;"></div>
    
    <div id="contentblock" class="contentblock" style="text-align:center; border-left: 5px solid blue">
        content   
    </div>
    
    <div id="rightblockfake" style="border-left: 0px solid blue;"></div>
    
</div>

<div id="rightblockreal" style="border: 0px solid blue">
    right
</div>

CSS

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
    color: #333;
    background: #fff;
}

#container {
    width: 100%;
    display: table;
    table-layout: fixed;
    border:0;
    height:auto;
    min-height:100%;
    
}
#container > div {
    display: table-cell;
    border:1;
    height:auto;
    min-height:100%;
}

#contentblock {
    width: 800px;
    padding: 0px;
    border-left: 0;
    height:auto;
    min-height:100%;
}

#contentblock > div {
    height:auto;
    min-height:100%;
}

#rightblockreal {
    position: fixed;
    top: 0;
    right: 0;
    height:auto;
    min-height:100%;
}

#rightblockfake > div {
    border-bottom:0; 
    border-right:0; 
    border-top:0
}

#rightblockreal > div {
    padding: 10px;
    border-left: 0;
    border-top: 0;
    border-bottom:0;
    overflow-y: hidden;
    height:600px;
}

#leftblockreal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
}

#leftblockfake > div {
    border-bottom:0; 
    border-right:0; 
    border-top:0
}

#leftblockreal > div {
    padding: 10px;
    border-left: 0;
    border-top: 0;
    border-bottom:0;
    overflow-y: auto;
}

JavaScript

var $e = $('#rightblockreal'),
    $o = $('#rightblockfake');
$(window).resize(function() {
    $e.width($o.width());
}).resize();

var $e = $('#leftblockreal'),
    $o = $('#leftblockfake');
$(window).resize(function() {
    $e.width($o.width());
}).resize();