How do I align texts and an image inside a div?

Basically I have two pieces of text and an image.

<div class="container">
    <span class="title">Text</span>
    <img src="an_image.png" />
    <span class="note">Other Text</span>
</div>

I want all the elements to be at the bottom of the container div, the title to aligned to the left, and the note all the way to the right. The image will be right next to the title and aligned to the bottom of the title text. So far the only way I have gotten this to work is by using relative/absolute position. Is there a way to do this with CSS?

Here is an image of what I am trying to accomplish. I can change the width and height of the container and the title, image, and notes will align properly开发者_Python百科 to the bottom, left, and right just like so:

Try this

  <style type="text/css">
    .container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
    .note { position: absolute; right: 0; bottom: 0; }
  </style>

  <div class="container">
      <span class="title">Text</span>
      <img src="an_image.png" height="100" width="100" />
      <span class="note">Other Text</span>
  </div>

Sorry, Updated solution... Here's the working link

You can try to play around with the vertical-align, but it's kinda evil..i usually use the absolute position. You can test by yourself on the W3C Tryit Editor