position a <span> at the bottom of a <td> table cell

Question

I am trying to get a <span> to sit at the bottom of a fixed-height <td>, however it does not seem to be working.

I am developing in Firefox using Firebug and this is my markup and CSS.

I have read other posts stating that the td height needs to be fixed, well I have done that, however I am still having the same problem. How can I position the span at the bottom of the td?

<td class="details_amount">
  <span class="item_total_price">
    £<span id="amount_99201100099">49</span>
  </span>
  <br>
  <span class="person_price">£5</span>
</td>

td {
    height: 55px;
    padding-top: 1.8em;
    vertical-align: top;
}

.item_total_price {
    height: 100%;
}

.person_price {
    bottom: 0;
    position: relative;
}

Answer 1

You need position:absolute not position: relative for .person_price:

.person_price {
   position: absolute;
   bottom:0;
   left:0;
}

And also make his parent relative:

td {
  position:relative;
}