Как сделать текст вертикальным выравниванием по дну в плавающих divs?

Question

Я пытался решить это уже пару часов, и я не могу заставить его работать.

У меня есть поплавок слева & правый div. В правом div содержится изображение, а левое div содержит текст. Изображение & текст swap left & в соответствии с предпочтениями пользователей, поэтому я использую float.

Как разместить текст в нижней части обертки, но рядом с изображением?

У меня есть визуальное отображение ниже:

Вот мой HTML код:

<div class="wrapper"> 
    <div class"text">Text aligned at bottom</div> 
    <div class="photo"><img id="photograph" src="" width="140px" height="140px" /></div> 
</div> 

Answer 1

Добавлен <div class="inner">, и установить его в качестве display:table-cell + vertical-align:bottom, см после демонстрации и фрагмента.

Редактировать: также добавлено calc(), чтобы сделать снимок div только шириной фотографии, а текст div занимает всю оставшуюся ширину автоматически.

JsFiddle Example

.wrapper { 
 
    border: 1px solid blue; 
 
    overflow: auto; 
 
} 
 
.wrapper .text { 
 
    float: left; 
 
    width: calc(100% - 140px); 
 
} 
 
.wrapper .photo { 
 
    float: right; 
 
} 
 
.wrapper .inner { 
 
    display: table-cell; 
 
    height: 140px; 
 
    vertical-align: bottom; 
 
} 
 
.wrapper .inner img { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <div class="text"> 
 
     <div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div> 
 
    </div> 
 
    <div class="photo"> 
 
     <div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div> 
 
    </div> 
 
</div>