JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<nav>
  <ul>
    <li><svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41" />
</svg>

</li>   
    <li><svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41 m 25 -5 l 0 51" />
</svg></li>
    <li><svg width="65" height="65">
    <path stroke-width="5" stroke='#d9d3d2' fill="none" d="m 10 15 q 0 -5 5 -5 l 41 0 q 5 0 5 5 l 0 41 q 0 5 -5 5 l -41 0 q -5 0 -5 -5 l 0 -41 m 25 -5 l 0 51 m -25 -25 l 51 0" />
</svg></li>
  </ul>
</nav>
<div class="column">
  <div class="top">
    <div class="wrapper" style="">
      <div class="box">A</div>
      <div class="handler"></div>
      <div class="box">B</div>
    </div>
  </div>
  <div class="slider"></div>   
  <div class="bot">
    <div class="wrapper" style="">
      <div class="box">A</div>
      <div class="handler"></div>
      <div class="box">B</div>
    </div>
  </div>
</div>

CSS

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    margin:0;
    background: #565b5f;
    //overflow: hidden;
}
nav{
  
}
nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  height:40px;
  background: rgba(0,0,0,0.5);
}
nav ul li{
 width: 40px;
}
svg{
  padding:5px;
  transform:matrix(0.50,0.00,0.00,0.50,-20,-20);
-ms-transform:matrix(0.50,0.00,0.00,0.50,-20,-20);
-webkit-transform:matrix(0.50,0.00,0.00,0.50,-20,-20);

}
svg path:hover {
    stroke:#8db9c9;
    pointer-events:all;
    cursor:pointer;

}
.wrapper {
  background-color: none;
  color: #444;
  /* Use flexbox */
  display: flex;
  height: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
  -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 auto;
}

.handler {
  width: 4px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}
.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: #565b5f;
  margin: 0 auto;
}


.column {
    width: 100%;
    height: calc(100% - 44px);
    background-color: none;
}

.top {
    width: 100%;
    height: 50%;
    background-color: none;
}

.bot {
    width: 100%;
    height: 50%;
    background-color: none;
}

.slider {
  width: 100%;
  height:4px;
  padding: 0;
  cursor: ns-resize	;
  flex: 0 0 auto;
}
.slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: #565b5f;
}

JavaScript

var boxAminWidth = 60;
var handler;
var wrapper;
var boxA;
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target.className === "handler") {
  	handler = e.target;
    wrapper = handler.parentElement;
    boxA = wrapper.querySelector('.box');
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetLeft = wrapper.offsetLeft;

  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  
  // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
  

  // Resize box A
  // * 8px is the left/right spacing between .handler and its inner pseudo-element
  // * Set flex-grow to 0 to prevent it from growing
  boxA.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
  boxA.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});


$(document).ready(function()
{
	$('.slider').on('mousedown',function(e)
  {
		$('.column').on('mousemove',function(e)
    {
    	var top = e.pageY - 44 + e.originalEvent.movementY;
      if(top < boxAminWidth)
      {
      	top = boxAminWidth;
      }
			$('.top').height(top);
      
      var bot = $(window).height() - 44 - $('.top').height();
      if(bot < boxAminWidth)
      {
      	$('.top').height($(window).height() - 104);
      	bot = boxAminWidth;
      }
      $('.bot').height(bot);
		});
	});
	$('.column').on('mouseup',function(){
		$('.column').off('mousemove');
	});
});