JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="page">
    <div class="header">THIS IS A BIG FAKE HEADER</div>
    <div class="main_content">
        <div id="content_top">
            <div id="body_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit eros, varius ac pharetra in, egestas sed massa. Fusce vitae nisl id urna facilisis ullamcorper. In hac habitasse platea dictumst. Nunc nec est nibh, vitae imperdiet nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed libero eu tellus scelerisque auctor. Curabitur a diam nisi. Duis ac arcu sem. Phasellus a viverra augue. Donec posuere, tortor et tristique tincidunt, tellus est imperdiet risus, vitae dictum justo lacus sit amet turpis. Donec sit amet metus dolor, et blandit libero. Pellentesque bibendum est id neque fringilla pharetra. Aenean odio augue, luctus quis elementum a, congue eget nisi. Maecenas cursus, quam id mollis gravida, erat nulla blandit metus, sed facilisis diam massa id odio.

                Ut scelerisque, sem ac rutrum mattis, neque risus dapibus leo, quis dignissim augue sem vel massa. Praesent ac dui et mauris sodales consectetur. Sed faucibus sollicitudin magna et eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sed urna tortor, sed pharetra tellus. Pellentesque condimentum tortor quis urna porttitor et faucibus nunc mattis. Donec mollis, nisl eu varius luctus, mauris turpis luctus sapien, sed pretium nunc nibh eget est. Maecenas nec magna laoreet dui vehicula rutrum. Phasellus eu risus eu lectus adipiscing pretium a et sapien. Curabitur condimentum lacus quis ipsum gravida varius. Maecenas accumsan viverra ipsum id volutpat.
                Ut orci risus, rutrum eu interdum et, sodales ut orci. Etiam vel nibh arcu, et suscipit augue. Nunc gravida viverra arcu sit amet aliquet. Phasellus imperdiet, magna eu feugiat facilisis, erat orci pellentesque nunc, in mattis nisl est vel erat. Cras quis est orci,...

CSS

.page {
    overflow: hidden;
    height: 300px;
    width: 600px;
    border: 1px solid black;
}
.header {
    height: 40px;
    background: aliceblue;
    margin-bottom: 20px;
    border-bottom: 1px solid black;
}

.main_content {
    height: 100%;
    padding: 10px;
}
#content_top {
    height: 20%;
    max-height: 100px;
    min-height: 10%;
    overflow: hidden;
    padding-bottom: 46px;
    
}
#body_content {
    border: 1px solid black;
    overflow: auto;
    height: 100%;
    margin: 0px 11px 10px 2px;
    padding: 10px;
}
#content_bottom {
    overflow: hidden;
    height: 100%;

}
#comment_box {
    border: 1px solid black;
    overflow: auto;
    display: inline-block;
    height: 100%;
    margin: 0px 11px 10px 2px;
    padding: 10px;
}
#comment_box_input {
    padding:10px;
    background-color:#f0f0f0;
    border:1px solid #e1e1e1;
    margin-bottom: 10px;
}
#comment_input {
    width:100%;
    height:23px;
    font-size:14px;
}
.ui-resizable-s {
    border-top: 1px solid #DCDCDC;
    bottom: -5px;
    cursor: row-resize;
    height: 4px;
    left: 0;
    width: 100%;
}
.ui-resizable-handle {
    display: block;
    font-size: 0.1px;
    z-index: 99999;
    background: none repeat scroll 0 0 #F0F0F0;
}
.ui-resizable {
    position: relative;
}

JavaScript

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function(event, ui) {

        var self = $(this).data("resizable"), o = self.options;

        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    height: parseInt($(this).height(), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },

    resize: function(event, ui){
        var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0,
            top: (self.position.top - op.top) || 0
        },

        _alsoResizeReverse = function(exp, c) {
            $(exp).each(function() {
                var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['height', 'top'];

                $.each(css || ['height', 'top'], function(i, prop) {
                    var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
                    if (sum && sum >= 0)
                        style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                }

                el.css(style);
            });
        };

        if (typeof(o.alsoResizeReverse) ==...