The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

 
 section {
 	background:purple;
 	display:inline-block;
 	padding-right:40px;
 }
 
.tile.hero {
	display:inline-block;
}

.sub-hero {
	margin:20px 0;
}

.sub-heroes {
	display:inline-block;
	background-color:red;
	position:relative;
}

h2,h3 {
	display:inline-block;
}

dabblet.html

<section class="hub">
	<header>
		<h2>Title</h2>
		<h3>4 issues</span>
	</header>
	
	<article class="hero tile" style="width:400px; height:600px; background-color:grey;"></article>
	<div class="sub-heroes">
		<article class="sub-hero tile" style="width:200px; height:270px; background-color:grey;"></article>
		<article class="sub-hero tile" style="width:200px; height:270px; background-color:grey;"></article>
	</div>
	
	<div class="hero-shadow" style="background-color:grey;"></div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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