Untitled

dabblet.css

.a {
	display: flex;
	flex-flow: column nowrap;
	width: 200px;
	height: 200px;
	background: yellow;
	border: 1px solid #999;
	padding: 5px;
	box-sizing: border-box;
}

.l {
  	flex: 1;
}

.l1 {
	background: lightgreen;
}

.b {
	flex: 2;
	display: flex;
}

.c {
	flex: 1;
}

.c1 {
	flex-basis: 55%;
	background: lightgrey;
}

.c2 {
	flex-basis: 45%;
	background: darkgrey;
}

.l4 {
	flex: 1;
	background: lightblue;
}

dabblet.html

<div class="a">
	<div class="l l1">l1</div>
	<div class="b">
		<div class="c c1">l2</div>
		<div class="c c2">l3</div>
	</div>
	<div class="l l4">l4</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}