Understanding vertical-align for once and for all

dabblet.css

/* Understanding vertical-align for once and for all */
* {
  margin: 0;
  padding: 0;
}

body {
  background: white;
}

.clear {
  clear: both;
}

.test {
  float: left;
  margin-right: 10px;
}

.test > div {
  float: left;
  height: 50px;
  background: red;
}

#expt {
  line-height: 50px; 
}

#expt > span {
  background: pink;
  vertical-align: middle;
}

#expt > #content {
  vertical-align: text-bottom;
  color: blue;
  background: limegreen;
}

.baseline {
  background: #BADA55;
  vertical-align: baseline;
}

.sub {
  background: orange;
  vertical-align: sub;
}

.super {
  background: skyblue;
  vertical-align: super;
}

.textTop {
  background: lightblue;
  vertical-align: text-top;
}

.textBottom {
  background: teal;
  vertical-align: middle;
}

.middle {
  background: goldenrod;
  vertical-align: super;
}

.top {
  background: violet;
  vertical-align: top;
}

.bottom {
  background: papayawhip;
  vertical-align: bottom;
}

.test > .want {
	font-size: 20px;
}

.test > .explore > span {
	opacity: 0.5;
}

.helper {
    font-size: 50px;	
}

.textMega {
	font-size: 30px;
}
.textKilo {
	font-size: 24px;
}

dabblet.html

<div class="test">
  <h1>Experiment together</h1>
  <div class="expt">
    <span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h1>Control together</h1>
  <div class="control">
    <span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div><div class="test">
  <h1>Experiment separate</h1>
  <div class="expt">
    <span class="baseline">baseline</span>
  </div>
  <div class="expt">
    <span class="super">super</span>
  </div>
  <div class="expt">
    <span class="sub">sub</span>
  </div>
  <div class="expt">
    <span class="textTop">textTop</span>
  </div>
  <div class="expt">
    <span class="textBottom">textBottom</span>
  </div>
  <div class="expt">
    <span class="middle">middle</span>
  </div>
  <div class="expt">
    <span class="top">top</span>
  </div>
  <div class="expt">
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h1>Control separate</h1>
  <div class="control">
    <span class="baseline">baseline</span>
  </div>
  <div class="control">
    <span class="super">super</span>
  </div>
  <div class="control">
    <span class="sub">sub</span>
  </div>
  <div class="control">
    <span class="textTop">textTop</span>
  </div>
  <div class="control">
    <span class="textBottom">textBottom</span>
  </div>
  <div class="control">
    <span class="middle">middle</span>
  </div>
  <div class="control">
    <span class="top">top</span>
  </div>
  <div class="control">
    <span class="bottom">bottom</span>
  </div>
</div>
<br class="clear"/>
<br class="clear"/>
<div class="test">
  <h1>
    What I want (&quot;easy&quot;)
  </h1>
  <div class="want">
  	<span class="helper"></span>
    <span>
      Align me to the bottom
    </span>
  </div>
</div>
<div class="test">
	<h1>What I want (final)</h1>
	<div class="final">
	  	<span class="helper"></span>
	  	<span class="textMega">Todd Wolfson</span>
	    <span class="textKilo">Javascript Developer</span>
	</div>
</div>
<br class="clear"/>
<br class="clear"/>
<h1>
  Exploration and curiousity
</h1>
<div class="test">
  <h2>Helper - baseline</h2>
  <div class="explore">
  	<span class="helper baseline"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - super</h2>
  <div class="explore">
  	<span class="helper super"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - sub</h2>
  <div class="explore">
  	<span class="helper sub"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - textTop</h2>
  <div class="explore">
  	<span class="helper textTop"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - textBottom</h2>
  <div class="explore">
  	<span class="helper textBottom"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - middle</h2>
  <div class="explore">
  	<span class="helper middle"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - top</h2>
  <div class="explore">
  	<span class="helper top"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>
<div class="test">
  <h2>Helper - bottom</h2>
  <div class="explore">
  	<span class="helper bottom"></span>
  	<span class="baseline">baseline</span>
    <span class="super">super</span>
    <span class="sub">sub</span>
    <span class="textTop">textTop</span>
    <span class="textBottom">textBottom</span>
    <span class="middle">middle</span>
    <span class="top">top</span>
    <span class="bottom">bottom</span>
  </div>
</div>

settings.json

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

http://dabblet.com/gist/2664620