How to align text along an axis?

How to align text along an axis?

I want to have my left column aligned right, and my right column aligned
left, so that they line up along a central axis, like this:
16 January 2013 | Here is a line of text.
26 December 2013 | Another line of text here.
4 May 2011 | Here is something else.
The HTML is in <span>s, like this:
<div class="line">
<span class="date">16 January 2013</span> <span class="text">Here is a
line of text.</span>
</div>
I've been trying to do this with .line { display: table-row; } and .line
span { display: table-cell; } but it doesn't seem to work.