dumb css question

hey there
i am new to css and i am stuck on something i dont understand well.

i am trying to do this without the use of tables at all!

in the same <div> i want to be able to align one section of text to the left - and another section of text to the right.

it would be super easy with tables and simply two <td>'s in a <tr> with appropriate align: left/right options.

but whenever i add two <p> blocks to the <div> block - they get added one on top of the other - and the text in the <p> blocks dont get aligned left/right.

here are my styles and snippet of code:
div.news {
margin: 0px;
padding: .6em;
background-color: #354f7e;
}
p.headline {
display: inline;
postion: relative;
left: 5px;
background-color: #354f7e;
color: white;
text-align: left;
}
p.date {
display: inline;
background-color: #354f7e;
color: white;
text-align: right;
}

<div class="news">
<p class="headline">Microsoft go bankrupt</p>
<p class="date">24 May 2003</p>
</div>


this gives me the headline and date positioned correctly vertically, but the two <p>'s are joined together in the center instead of being aligned left and right.

Try this.


May be viewed at http://garyblue.port5.com/webdev/dumbcss.html

cheers,

gary