Untitled

dabblet.css

*{box-sizing: border-box;}
body{font-family: Arial, sans-serif;}

.container {
background: #ccc;
border: 1px solid;
}
.container:after {
content: '';
display: table;
clear:both;
}
[class^='el'] {
padding: 10px;
float: left;
width: 50%;
}
.el-1 {
background: #0cf;
}
.el-2 {
background: #0fc;
height: 50px;
}
.main {
background: #cf0;
border: 1px solid;
height: 100px;
width: 100px;
margin: 10px;
}

#big-box {
	background: lightblue;
	position: relative;
line-height:0;
overflow: auto;
	}
	.outer{overflow:hidden;}
	.box{padding: 20px;	background: lightgray;	margin: 20px 0; width:100%;}	
	.box:first-child{position:absolute;top:50px;background: red;}

dabblet.html

<div class="container">  <div class="el-1">A long string of stuff here...</div>  <div class="el-2">A short string of stuff here...</div>

</div>

<div class="main">  Some stuff here...</div>

<div id="big-box"><div class="box"></div><div class="box"></div></div><div class="box"></div><div class="box"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}