Aligned subtree

by kmouse

HTML

<div class="wrapper">
	<span class="tall block">A</span>
	<span class="medium top">
		B
		<span class="tiny block bottom">C</span>
		D
	</span>
	<span class="big">
		E
		<span class="tiny block">F</span>
		G
	</span>
</div>

<div class="wrapper split">
	The following text <span>should wrap down to the<br> next line</span> and produce borders on each line.
</div>

CSS

.wrapper {
	width: 800px;
	overflow: auto;
	resize: both;
	position: relative;
	background-color: #eee;
	border: 8px solid #ddd;
	padding: 0px;
	margin-bottom: 2em;
	line-height: 2em;
}
span {
	border: solid #3332;
	border-width: 1px;
	background: #dfd;
	padding: 0.5em;
}
span.block {
	background: #fdf;
	display: inline-block;
}
.medium { line-height: 1.2em; }
.tall { line-height: 5em; }
.big { line-height: 4em; }
.tiny { line-height: 1.5em; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }

.split {
	line-height: 2em;
}
.split span {
	line-height: 4em;
	border-width: 3px;
	padding: 0;
	vertical-align: top;
}