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

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; }