Help with Text Baseline

solved

vertical-align only works for inline elements.
in fact vertical-align is not what you think it is


<div style="position: relative; width: 300px; height: 300px; border: 1px solid;">
<div style="position: absolute; bottom: 0; width: 100%; height: 10px; background-color: #DDD;">

</div>
</div>


By setting the parent to position: relative;, everything you absolute within it will be relative to the parent. Therefore it will be at the bottom (relatively)

You can also you display: inline-block; or display: table; w/ display: table-cell for children to use vertical-align: ; in the way you want to use it, though both have browser support issues (more for display: table)

vertical align alone will be relative to the tallest element within the parent, not really what your looking for in this case