Come allineare in basso due elementi in un elemento DIV?

Question

Attualmente lo sto facendo con una tabella con 2 celle allineate in basso. Sto bene con la soluzione da tavolo, ma mi chiedo solo se è possibile (solo css e html, non javascript).

Requisito:
* Le dimensioni del testo e dell'immagine non sono note, ma la larghezza combinata delle due non supererà la larghezza dell'elemento contenitore. (ad esempio, se successivamente voglio cambiare l'immagine o il testo, non voglio immergermi nel file ccs)
* L'immagine è allineata a sinistra e il testo (in realtà, una lista orizzontale) è allineato a destra .

Edit: In risposta a Coo,

• le dimensioni del testo e le immagini sono dinamici, sia l'altezza o larghezza, ma la larghezza combinata dei due elementi saranno non superare la larghezza dell'elemento contenitore.
  
• l'immagine e il testo devono essere allineati in basso
  
• l'elemento che contiene dovrebbe adattarsi strettamente l'elemento più alto.

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: ho aggiunto il codice HTML appropriato.

EDIT 2: Nel caso in cui l'altezza del wrapper è sconosciuta (unica restrizione è che .image deve sempre essere superiore .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

Questo dovrebbe funzionare Penso:

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; }