JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" id="area0">
    <div class="floatleft yellow" style="width: 100%; height: calc(50% - 2px);"></div>
    <div class="floatleft changesizev"></div>
    <div class="floatleft" style="width: 100%; height: calc(50%);">
        <div class="floatleft green" style="width: 15.350877192982455%; height: 100%;"></div>
        <div class="floatleft changesizeh"></div>
        <div class="floatleft" style="width: 83.7719298245614%; height: 100%;">
            <div class="floatleft red" style="width: 100%; height: 58.47953216374269%;"></div>
            <div class="floatleft changesizev"></div>
            <div class="floatleft blue" style="width: 100%; height: 40.35087719298246%;"></div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.floatleft {
    float: left;
    position: relative;
    display: table;
    overflow: hidden;
}

.area {
    height: 343px;
    width: 228px;
    top : 50.16785px;
    left: 50.78555px;
    position: absolute;
    background-color: purple;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: cyan;
}

.yellow {
    background-color: yellow;
}

.changesizeh {
    height: 100%;
    width: 2px;
    background-color: black;
    z-index: 90;
    cursor: col-resize;
}

.changesizev {
    width: 100%;
    height: 2px;
    background-color: black;
    z-index: 20;
    cursor: row-resize;
}

JavaScript

var downV = false;
var downH = false;
var sizePart = 0;
var sizeTot = 0;
var upperSize = 0;
var upchild = null;
var downchild = null;

$(document).ready(function(){
   $("*").mouseup(function(event) {
        if (downV) {
            downV = false;
            $("body").css("cursor","initial");
            upchild.css("height", upchild.height()*100/sizeTot+"%");
            downchild.css("height", downchild.height()*100/sizeTot+"%");
            event.stopPropagation();
        } else if (downH) {
            downH = false;
            $("body").css("cursor","initial");
            upchild.css("width", upchild.width()*100/sizeTot+"%");
            downchild.css("width", downchild.width()*100/sizeTot+"%");
            event.stopPropagation();
        }
    });
    $(".area").mousemove(function(event) {
        if (downV){
            var y = event.pageY - $(this).offset().top - upperSize;
            if (y < 0) {
                y = 0;
            }
            if (y > sizePart) {
                y = sizePart;
            }
            upchild.css("height", Math.floor(y)+1);
            downchild.css("height", Math.floor(sizePart-y));
            event.preventDefault();
        } else if (downH) {
            var x = event.pageX - $(this).offset().left - upperSize;
            if (x < 0) {
                x = 0;
            }
            if (x > sizePart) {
                x = sizePart;
            }
            upchild.css("width", Math.floor(x)+1);
            downchild.css("width", Math.floor(sizePart-x));
            event.preventDefault();
        }
    });
    initHDiv($(".changesizeh"));  
    initVDiv($(".changesizev"));
});

function initHDiv(elem){
    elem.mousedown(function(event) {
        downH = true;
        $("body").css("cursor","col-resize");
        upchild = $(this).prev();
        downchild = $(this).next();
        sizePart = upchild.width() + downchild.width();
        sizeTot = $(this).parent().width();
        upperSize = 0;
       ...