macx/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
body {
	background: #fff;
	min-height: 100%;
}

.container {
	display: -webkit-flex;
	background: lightgray;
}

.box {
	padding: 10px;
	background: yellow;
}

.box1 {
	background: red;
	width: 150px;
}

.box2 {
	background: orange;
	flex: 1;
}

.box3 {
	background: blue;
}

.box4 {
	background: limegreen;
}

.box5 {
	background: yellow;
	width: 150px;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<section class="container">
	<article class="box box1">BOX 1</article>
	<article class="box box2">BOX 2</article>
	<article class="box box3">BOX 3</article>
	<article class="box box4">BOX 4</article>
	<article class="box box5">BOX 5</article>
</section>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/
	body {
	background: #fff;
	min-height: 100%;
	}

	.container {
	display: -webkit-flex;
	background: lightgray;
	}

	.box {
	padding: 10px;
	background: yellow;
	}

	.box1 {
	background: red;
	width: 150px;
	}

	.box2 {
	background: orange;
	flex: 1;
	}

	.box3 {
	background: blue;
	}

	.box4 {
	background: limegreen;
	}

	.box5 {
	background: yellow;
	width: 150px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<section class="container">
	<article class="box box1">BOX 1</article>
	<article class="box box2">BOX 2</article>
	<article class="box box3">BOX 3</article>
	<article class="box box4">BOX 4</article>
	<article class="box box5">BOX 5</article>
	</section>