How to align two elements in a div element?

Question

I am currently doing this with a table with two cells with bottom alignment. I am fine with table solution, but just wondering if this is possible (just css and html, without javascript).

Demand:
* Text and image sizes are unknown, but their combined width will not exceed the width of the containing element. (for example, if later I want to change the image or text, I do not want to dive into the ccs file)
* The image is aligned to the left, and the text (in fact, a horizontal list) is aligned to the right.

Edit: In response to Kos,

• the sizes of the text and images are dynamic, be it height or width, BUT the combined width of these two elements will not exceed the width of the containing element.
  
• image and text should be aligned at the bottom
  
• the containing element should fit snugly against the tallest element.

Answer 1

HTML

<div class="wrapper"> <img src="" class="image" /> <p class="text">Hello world!</p> </div> 

CSS

 .wrapper { position: relative; width: 500px; } .image { position: absolute; display: block; left:0; bottom: 0; } .text { position: absolute; right:0; bottom: 0; } 

EDIT: I added the appropriate HTML code.

EDIT 2: In case the wrapper height is unknown (only limitation is that .image should always be higher than .text)

CSS

 .wrapper { position: relative; width: 500px; } .image { vertical-align: bottom; } .text { position: absolute; right: 0; bottom: 0; } 

HTML

 <div class="wrapper"> <img class="image" src="" /> <p class="text"> Hello world! </p> </div> 

Answer 2

 <div style="width:400px; overflow:visible; position:relative;"> <img src="#" alt ="#" style="float:left;"/> <p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p> </div> 

Answer 3

This should work, I think:

HTML

 <div class="outer"> <img src="" title="" /> <div class="text">Some text </div> </div> 

CSS

 .outer {display: inline-block; width: 350px; } .outer img {float: left;} .outer .text {float: right; }