Untitled

dabblet.css

* {
margin: 0; 
padding: 0; 
box-sizing: border-box; /* paulirish.com/2012/box-sizing-border-box-ftw/ */
position: relative; 
}

html, body {
	height: 100%;
	}

#parent {
	width:300px;
	height:300px;
	background-color:#ccc;
	
	text-align: center;
	}
	#parent:before {
		content: '';
		display: inline-block;
		height: 100%;
		margin-right: -4px;
		
		vertical-align: bottom; /* works without */	
		}

.child {
	display: inline-block;
	vertical-align: bottom;
	height:100px;
	width:30px;
	background-color:#999;
	}
	.one {
		height: 200px;
		}
	.two {
		height: 300px;		
		}
	.three {
		height: 100px;
		}
	.four {
		height: 210px;
		}

dabblet.html

<div id="parent">

	<div class="child one">d</div>
	
	<div class="child two">f</div>
	
	<div class="child three">g</div>
	
	<div class="child four">h</div>

</div>

settings.json

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