JSFiddle - React, Tailwind, and code Playground

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
    height:auto;
    min-height:100%;
}

#rightblockreal > div {
    padding: 10px;
    border-left: 0;
    border-top: 0;
    border-bottom:0;
    overflow-y: auto;
    height:auto;
    min-height:100%;
}

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

#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;
}


#comments_holder{
    word-wrap: break-word;
}

#commentbtn{
    word-wrap: break-word;
}

#inputcomment{
    word-wrap: break-word;
}

#conversations_holder{
    word-wrap:break-word;
}


/* LINKS */

a:link, a:visited {
    color: #5b80b2;
    text-decoration: none;
}

a:hover {
    color: #485F7D
}

a.categoria:link, a.categoria:visited {
    color: #424242;
    text-decoration: none;
}
a.categoria:hover {
    color: #424242;
}

a.delete:link, a.delete:visited {
    color: #FF0C0C;
    text-decoration: none;
}
a.delete:hover {
    color: #850000;
}

a.back:link, a.delete:visited {
    color: #FF0C0C;
    text-decoration: none;
    font-size:18px;
}
a.back:hover {
   ...

JavaScript

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

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