<main class="layout-column resizable-container" data-resize-basis="60" data-resize-type="row">

  <div class="row layout-row resizable resizable-container" data-resize-basis="70" data-resize-type="column">
    <section id="panel-1" class="panel resizable"></section>
    <section id="panel-2" class="panel resizable"></section>    
    <div class="resize-bar resize-bar-column"></div>
  </div>
  
  <div class="row layout-row resizable resizable-container" data-resize-basis="30" data-resize-type="column">
    <section id="panel-3" class="panel resizable"></section>
    <section id="panel-4" class="panel resizable"></section>    
    <div class="resize-bar resize-bar-column"></div>
  </div>  
  
  <div class="resize-bar resize-bar-row"></div>
</main>

$barSize: 14px;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  padding: $barSize;
}

main {
  position: relative;
  height: 100%;
  visibility: hidden;
  opacity: 0;
}

.row {
  position: relative;
}

.panel {
  flex: 1;
  position: relative;  
}

.resize-bar {
  position: absolute;
  height: $barSize;
  width: $barSize;
  top: 0;
  left: 0;
  background: #fff;
}

.resize-bar-column {
  height: 100%;
}

.resize-bar-row {
  width: 100%;
}

.layout-column {
  display: flex;
  flex: 1 1 100%;
  max-width: 100%;
  flex-direction: column;
}

.layout-row {
  display: flex;
  flex: 1 1 100%;
  max-height: 100%;
  flex-direction: row;
}

#panel-1 {
  background: #ce93d8;
}

#panel-2 {
  background: #80deea;
}

#panel-3 {
  background: #a5d6a7;
}

#panel-4 {
  background: #ffcc80;
}

var body = document.body;

var resizables = $(".resizable-container").map(createResizable);
var requestId = null;

TweenLite.set("main", { autoAlpha: 1 });
$(window).resize(requestResize);

function createResizable(index, element) {
  
  var container = $(element);
  var panels = container.children(".resizable");
  var panelA = panels[0];
  var panelB = panels[1];
  var bar = container.children(".resize-bar")[0];
  
  var isColumn = (container.data("resize-type") === "column");
  var basis = container.data("resize-basis");
  var rect = element.getBoundingClientRect();
    
  var resizable = {
    resized: false
  };
    
  var cursor;
  
  if (isColumn) {    
    cursor = "col-resize";
    TweenLite.set(bar, { xPercent: -50 });
    
  } else {    
    cursor = "row-resize";
    TweenLite.set(bar, { yPercent: -50 });
  }
    
  var draggable = new Draggable(bar, {
    cursor: cursor,
    bounds: container,    
    onDrag: resizePanels,
    onPress: setAbsolute,
    onRelease: setRelative
  });
  
  setAbsolute.call(draggable);
  resizePanels.call(draggable);
  setRelative.call(draggable);
  
  function resizePanels() {
        
    basis = (isColumn ? this.x / rect.width : this.y / rect.height) * 100;
    
    panelA.style.flexBasis = basis + "%";
    panelB.style.flexBasis = (100 - basis) + "%";    
  }
  
  function setAbsolute() {
        
    body.style.cursor = cursor;
    
    if (resizable.resized) {
      rect = element.getBoundingClientRect();
      resizable.resized = false;
    }
    
    if (isColumn) {
      TweenLite.set(bar, { left: 0, x: basis * rect.width / 100 });
    } else {
      TweenLite.set(bar, { top: 0, y: basis * rect.height / 100 });
    }
    
    this.update();
  }
  
  function setRelative() {
    
    body.style.cursor = "inherit";
    
    if (isColumn) {      
      TweenLite.set(bar, { x: 0, left: basis + "%" });      
    } else {
      TweenLite.set(bar, { y: 0, top: basis + "%" });
    }
  }
    
  return resizable;
}

function requestResize() {
  cancelAnimationFrame(requestId);
  requestId = requestAnimationFrame(resize);
}

function resize() {
  
  var total = resizables.length;
  
  for (var i = 0; i < total; i++) {
    resizables[i].resized = true;
  }
}