Aligned subtree mix

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">
	<span class="small top">
		A
		<span class="medium block bottom">B</span>
		<span class="bottom yellow">
			C
			<span class="line-up">
				D
				<span class="top">E</span>
			</span>
		</span>
	</span>
	<span class="tall block">F</span>
</div>
<div class="wrapper">
	<span class="small top">
		A
		<span class="medium block bottom">
			B
			<span class="bottom yellow">
				C
				<span class="line-up">
					D
					<span class="top">E</span>
				</span>
			</span>
		</span>
	</span>
	<span class="tall block">F</span>
</div>
<div class="wrapper">
	<span class="small bottom">
		A
		<span class="medium block top">
			B
			<span class="bottom yellow">
				C
				<span class="line-up">
					D
					<span class="halfline-up">E</span>
				</span>
			</span>
		</span>
	</span>
	<span class="tall block">F</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: visible;
  resize: both;
  position: relative;
  background-color: #eee;
  border: 10px solid #ddd;
  padding: 0px;
  margin-bottom: 2em;
  line-height: 2em;
	font-family: sans-serif;
	font-size: 14px;
}

span {
  border: solid #3332;
  border-width: 1px;
  background: #dfd;
  padding: 0.5em;
}

span {
  border-color: #3332;
  border-width: 1px;
  background: #dfd;
  padding: 0.5em;
}

span.block {
  background: #fdf;
  display: inline-block;
}

.tall {
  line-height: 5em;
}

.large {
  line-height: 3em;
}

.medium {
  line-height: 1.5em;
}

.small {
  line-height: 1.2em;
}

.top {
  vertical-align: top;
}

.center {
  vertical-align: center;
}

.bottom {
  vertical-align: bottom;
}

.middle {
  vertical-align: middle;
}
.line-up {
  vertical-align: -100%;
}
.halfline-up {
  vertical-align: 50%;
}

.split {
  line-height: 2em;
}

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

span.yellow,
.yellow span {
  background-color: #ffd;
}