Vertical-align: bottom not working

Question

I thought vertical-align was supposed to work with inline elements. Yet for some reason everything in the gray div is aligned to the top, not the bottom.

<div style="position:absolute; top:130px; right: 80px; width: 230px; background-color:Gray; height:30px;" class="defaultText" id="pager">
    <span style="vertical-align:bottom;">Page Size:</span>
    <select style="vertical-align:bottom; font-size:8pt; margin-top: 0; margin-left:3px; height:16px; text-align:center;">
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="500">500</option>
        <option value="10000">*</option>
    </select>
    <div style="float:right;">
        <span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-right: 10px;"><</span>
        <input style="vertical-align:bottom; height:12px; font-size:8pt; width: 20px;" type="text" data-bind="value: pageNum" />
        <span style="vertical-align:bottom;"> of </span>
        <span style="vertical-align:bottom;" data-bind="text: numPages"></span>
        <span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-left: 5px;">></span>
    </div>
</div>

Answer 1

Unless you're dealing with a table cell, what vertical-align does is aligns the element with respect to adjacent elements, particularly text. So, the elements in the gray div should be lined up with each other, not the bottom of the div. See examples at http://phrogz.net/css/vertical-align/index.html.

Answer 2

Here's an example where you can accomplish this by using the following code

DEMO: http://jsfiddle.net/SbNKa/1/

#theContainer {
    height: 100px;
    width: 500px;
    position: relative;
    border: 1px solid #900;
}
.content-bottom {
    position: absolute;
    width: 498px;
    bottom: 0; /*This is the part that glues it to the bottom*/
    border: 1px solid #000;
}
<div id="theContainer">
    <div class="content-bottom">Content</div>
</div>

Answer 3

Here's a modern updated answer using Flex boxes.

div {
  height: 100%; // containing div must fill the full height of the parent div
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

Answer 4

Here' the crack. I was looking for an answer (vertical-align) not it's alternate (bottom: 0). So here's the solution.

vertical-align is set with respect to its container, not the parent (or wrapper) element. So just give some line-height to it and then apply the vertical-align: bottom.

    div {
        background:yellow;
        margin:10px;
        line-height:100px;
    }
    div > * {
        vertical-align: bottom;
        line-height: normal;
    }

    a {
        background-color:#FFF;
        height:20px;
        display:inline-block;
        border:solid black 1px;
        padding:5px;
    }

    span {
        background:red;
        width: 50px;
    }

    <div>
    <a>Some link</a>
    <span>Some text </span>
    </div>