Aligning Div to the bottom right

Aligning Div to the bottom right

I have two elements that I would like to put on the bottom right of the
page.I went through a couple of threads but some parts help and others
tend to kill the layout.
Note: The background color is for illustration purposes. I would like the
text aligned to the right.
Here is where I am at: (http://jsfiddle.net/dsri/WswG9/)
HTML:
<div id="container">
<div id="a"> <span id="aa">Text1</span></div>
<div id="b"> <span id="bb">Text2</span></div>
</div>
CSS:
div#container{
text-align: center;
}
span#aa{
font-size: 75px;
color: rgba(0, 0, 0, 0.5);
background-color: Yellow;
overflow: hidden;
}
span#bb{
font-size: 45px;
color: rgba(0,0,0,0.5);
background-color: red;
}
This is what I would ideally like: http://i.imgur.com/ANuAvly.png