Pumpapa/gist:374e45654b6e60eefb48a180775a1682

## gistfile1.txt
<html>
<head>

<style>

body {
	margin: 0;
}
.ctr {
    width: 100%;
    height: 100%;
}

.hctr {
    display: flex;
    flex-direction: row;
}

.vctr {
    display: flex;
    flex-direction: column;
}

.hsep {
    width: 3px;
    height: 100%;
}

.vsep {
    width: 100%;
    height: 3px;
}

.hpanel {
    width: 50%;
    height: 100%;
}

.vpanel {
    width: 50%;
    height: 100%;
}

.sepa {
    cursor: grab;
    background-color: #888;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='6' r='4' fill='none' stroke='black'/><circle cx='5' cy='6' r='2' fill='none' stroke='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style></head><body>

<div class="ctr hctr">
	<div id="fst"  class="hpanel ctr vctr" >
		<div id="vfst"  class="vpanel" ></div>
		<div id="vsepa" class="sepa vsep"></div>
		<div id="vscnd" class="vpanel"></div>
	</div>
	<div id="sepa" class="sepa hsep"></div>
	<div id="scnd" class="hpanel"></div>
</div>

<script>
function panels( slide, one, two, dir) {
    var   md;
    const elt  = document.getElementById(slide);
    const fst  = document.getElementById(one);
    const scnd = document.getElementById(two);

    elt.onmousedown = onMouseDown;

    function onMouseDown(e) {
		md = {e,
			  offsetLeft:  elt.offsetLeft,
			  offsetTop:   elt.offsetTop,
			  fstWidth:  fst.offsetWidth,
			  scndWidth: scnd.offsetWidth,
			  fstHeight:  fst.offsetHeight,
			  scndHeight: scnd.offsetHeight
		};
		document.onmousemove = onMouseMove;
		document.onmouseup = () => {
			document.onmousemove = document.onmouseup = null;
		}
    }
    function onMouseMove(e) {
		var delta = {x: e.clientX - md.e.x,
				 	 y: e.clientY - md.e.y};
		if (dir === "H" ) {
			delta.x = Math.min(Math.max(delta.x, -md.fstWidth),
					   md.scndWidth);
			elt.style.left = md.offsetLeft + delta.x + "px";
			fst.style.width = (md.fstWidth + delta.x) + "px";
			scnd.style.width = (md.scndWidth - delta.x) + "px";
		} else {
			delta.y = Math.min(Math.max(delta.y, -md.fstHeight),
					   md.scndWidth);
			elt.style.top = md.offsetTop + delta.y + "px";
			fst.style.height = (md.fstHeight + delta.y) + "px";
			scnd.style.height = (md.scndHeight - delta.y) + "px";
		}
    }
}


panels("sepa","fst","scnd", "H" );
panels("vsepa","vfst","vscnd", "V" );

</script></body></html>
	<html>
	<head>

	<style>

	body {
	margin: 0;
	}
	.ctr {
	width: 100%;
	height: 100%;
	}

	.hctr {
	display: flex;
	flex-direction: row;
	}

	.vctr {
	display: flex;
	flex-direction: column;
	}

	.hsep {
	width: 3px;
	height: 100%;
	}

	.vsep {
	width: 100%;
	height: 3px;
	}

	.hpanel {
	width: 50%;
	height: 100%;
	}

	.vpanel {
	width: 50%;
	height: 100%;
	}

	.sepa {
	cursor: grab;
	background-color: #888;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='6' r='4' fill='none' stroke='black'/><circle cx='5' cy='6' r='2' fill='none' stroke='black'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	</style></head><body>

	<div class="ctr hctr">
	<div id="fst" class="hpanel ctr vctr" >
	<div id="vfst" class="vpanel" ></div>
	<div id="vsepa" class="sepa vsep"></div>
	<div id="vscnd" class="vpanel"></div>
	</div>
	<div id="sepa" class="sepa hsep"></div>
	<div id="scnd" class="hpanel"></div>
	</div>

	<script>
	function panels( slide, one, two, dir) {
	var md;
	const elt = document.getElementById(slide);
	const fst = document.getElementById(one);
	const scnd = document.getElementById(two);

	elt.onmousedown = onMouseDown;

	function onMouseDown(e) {
	md = {e,
	offsetLeft: elt.offsetLeft,
	offsetTop: elt.offsetTop,
	fstWidth: fst.offsetWidth,
	scndWidth: scnd.offsetWidth,
	fstHeight: fst.offsetHeight,
	scndHeight: scnd.offsetHeight
	};
	document.onmousemove = onMouseMove;
	document.onmouseup = () => {
	document.onmousemove = document.onmouseup = null;
	}
	}
	function onMouseMove(e) {
	var delta = {x: e.clientX - md.e.x,
	y: e.clientY - md.e.y};
	if (dir === "H" ) {
	delta.x = Math.min(Math.max(delta.x, -md.fstWidth),
	md.scndWidth);
	elt.style.left = md.offsetLeft + delta.x + "px";
	fst.style.width = (md.fstWidth + delta.x) + "px";
	scnd.style.width = (md.scndWidth - delta.x) + "px";
	} else {
	delta.y = Math.min(Math.max(delta.y, -md.fstHeight),
	md.scndWidth);
	elt.style.top = md.offsetTop + delta.y + "px";
	fst.style.height = (md.fstHeight + delta.y) + "px";
	scnd.style.height = (md.scndHeight - delta.y) + "px";
	}
	}
	}


	panels("sepa","fst","scnd", "H" );
	panels("vsepa","vfst","vscnd", "V" );

	</script></body></html>