Untitled

dabblet.css

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

.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;
	line-height:0;
}

.box{padding: 20px;	background: lightgray;	margin: 20px 0; width:100%; }	

	p {background: #eee;padding: 20px;border: 1px solid;line-height: 1.4; display:inline-block; width: 20%;vertical-align: top;/*margin-right:-5px;*/}
.ib-box{border: 1px solid; }
.bfc {overflow: hidden;}

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 class="big-box"><div class="box"></div><div class="box"></div></div><div class="box"></div><div class="box"></div>
<div class="ib-box">
<p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.</p><!--
--><p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.One example of a block-level element is a paragraph. If I toss two paragraphs into a HTML document, they stack on top of each other rather than appearing side by side. I have a lot of freedom over their dimensions and can really treat them as individual building blocks to shape as I please.</p>
<p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.</p><p>One example of a block-level element is a paragraph. If I toss two paragraphs into a HTML document, they stack on top of each other rather than appearing side by side. I have a lot of freedom over their dimensions and can really treat them as individual building blocks to shape as I please.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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