Positioning the text inside the cell - html

Question

I have this JSFiddle: Click here
<table class="findus-main-table">
<tr>
<td>
<img class="static-map" onClick="swap();" id="static-map-id" />
</td>
<td style="text-align: center; vertical-align:bottom; position: relative;">
<span style="font-size: 22px; font-weight: bold;">The address I want here</span>
<!-- the inner table for location and distance and phone number -->
<table style="text-align:left;" cellspacing="10">
<tr>
<td style="vertical-align:top">
<div>
<div>Phone: [phone]</div>
<div>Distance: 0.123km</div>
</div>
</td>
<td>
<div><b>Store Hours</b>
</div>
<div>Mon - Fri: 8am - 2am</div>
<div>Sat & Sun: 10am - 12am</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I want is to position the address to the top while the phone number and hours stays at the bottom. I tried using absolute but it wraps the text of the address which i really dont want.
How can I do it?

Answer 1

besides the fact that you shouldn't be using inline styling, is this what you're looking for?
<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">
FIDDLE

Answer 2

instead of using position:absolute witch should be the last thing anyone should try ,I use vertical-align:top
here is a fiddle.and here is my css :
.address{
text-align:center;
font-size:22px;
text-align: center;
font-size: 22px;
height: 78px;
padding: 0;
vertical-align: top;
}