JSFiddle - React, Tailwind, and code Playground

HTML

<div class="A border childDependent canResize">
  <div class="B border canResize">
    B
  </div>
  <div class="C border canResize">
    C
  </div>
  <div class="E border canResize">
    E
  </div>
  <div class="D border canResize">
    D
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.childDependent{
    content:"traverse:true";
}

.canResize {
    resize:vertical;
}

.border {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
 }
  .A {
    height: 200px;
    width: 200px;
  }
  .B {
    float: left;
    width: 35%;
    height: 75%;
    min-height: 125px;
    max-height: 225px;
    background: yellow;
  }
  .C {
    float: left;
    width: 35%;
    height: 75%;
    min-height: 100px;
    max-height: 250px;
    background: green;
  }
  .D{
    float: left;
    width: 70%;
    height: 25%;
    min-height: 25px;
    max-height: 50px;
    background: blue;
}

.E {
    float:right;
    height:100%;
    width:30%;
    background:red;
    min-height:100px;
    max-height:200px;
}

JavaScript

$(window).load(function(){
    console.log("Minimum Height: " + $('.A')[0]._minHeight);
    console.log("Maximum Height: " + $('.A')[0]._maxHeight);
})

// Custom max function that allows ignores undefined values
var _max = function(){
    var result = undefined;
    for(var i = 0; i < arguments.length; i++){
        if(result === undefined || result < arguments[i]){
            result = arguments[i];
        }
    }
    // Return 0 in case result === undefined, such that x + result !== undefined
    return result || 0;
}

var _min = function(){
    var result = undefined;
    for(var i = 0; i < arguments.length; i++){
        if(result === undefined || result > arguments[i]){
            result = arguments[i];
        }
    }
    // Return 0 in case result === undefined, such that x + result !== undefined
    return result || 0;
}

var _isContentChild = function(a,b){
    var aRect = a.innerRect;
    var bRect = b.outerRect;
    //Check if child element is a content node
    return Math.abs(aRect.top - bRect.top) <= 5;
}

var _isLayoutChild = function(a,b){
    var aRect = a.outerRect;
    var bRect = b.outerRect;

    // If element X has a boundary that intersects element Y, and
    // element X is located above element Y, element Y is a child node of
    // element X
    if(Math.abs(aRect.bottom - bRect.top) <= 5) {
        if (aRect.left <= bRect.left && aRect.right >= bRect.left ||
            aRect.left <= bRect.right && aRect.right >= bRect.right ||
            aRect.left >= bRect.left && aRect.right <= bRect.right ||
            aRect.left <= bRect.left && aRect.right >= bRect.right) {

            return true;
        }
    }
    return false;
}

var createNode = function(){
    return Object.create(Array.prototype,{
        // Returns the greatest path in the graph using the provided weighting function
        // The weighting function takes an HTMLElement as a parameter and returns and integer
        maximalPath: {
            value: function (weight)...