Need help align spans inside a div

Hi,

I have the following html and inline css:

<div id="container" style="height: 34px; width: 100%; border:1px solid #333">
<span id="largeText" style="font-size: 22px">Large text</span>
<span id="smallText" style="font-size: 12px">Small text</span>
</div>

I want to
(1) Vertically align both largeText and smallText to the center of the div
(2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.

Please help

(1) Vertically align both largeText and smallText to the center of the div
#container span{
display:block;
text-align:center;
}
(2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.
span#largeText{
text-align:left;
margin-left:5px;
}
span#smallText{
text-align:right;
margin-right:5px;
}

(The above CSS doesn't actually move the entire element)