Подстройка нижнего выравнивания CSS с переменным заполнением

Question

Я пытаюсь выяснить, как использовать CSS для выравнивания div в нижней части родительского div. Тем не менее, уловка в том, что мне нужно, чтобы нижний выровненный div перемещался вниз, если в него попадает другой сиб. На приведенном ниже рисунке показаны некоторые примеры различных выравниваний, которые могут возникнуть. Первые два являются идеальными, и я легко могу использовать те, которые используют абсолютное значение, и устанавливая нижнее значение равным 0. Однако это решение разбивается на третий пример, потому что текст будет перекрывать нижний div.

Image showing what I am trying to achieve

Answer 1

Предполагая, что все изображения имеют одинаковый размер

HTML

<div class="item"> 
    <div> 
    <div class="image"></div> 
    </div> 
    <div class="text"> 
    <div> 
     <div class="top"> 
     <div> 
      Top 
     </div> 
     </div> 
     <div class="bottom"> 
     <div> 
      Bottom 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.item {display: table;} 
    .item > div {display: table-cell; vertical-align: top;} 
    .text {width: 100%;} 
    .text > div {height: 144px; width: 100%; display: table;} 
    .text > div > div {display: table-row;} 
    .text > div > div > div {display: table-cell;} 
    .top {height: 100%;} 

Demo