Выровняйте два столбца (второй из них с двумя элементами) по базовой линии

Question

Я пытаюсь воссоздать что-то вроде прикрепленного скриншота. Обратите внимание, что блок с «другим текстом» выровнен по левому столбцу. Каждая серая коробка будет изображением. Также учтите, что текст может состоять из нескольких строк.

Это то, что я имею до сих пор: https://jsfiddle.net/chux/qgbw0moz/51/

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

Как их совместить?

.container {
  width: 100%;
}

img {
  display: block;
  margin: 0;
  max-width: 100%
}

.row {
  display: flex;
  align-items: strech;
}

.row>.col {
  flex-grow: 1;
}

.row-col {
  background: grey;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.first-col {
  background: red;
}

.second-col {
  background: green;
}

.third-col {
  background: pink;
}

<div class="container row">

  <div class="col first-col">
    <img src="https://placeimg.com/450/480/animals">
  </div>

  <div class="col">
    <div class="row-col">

      <div class="col second-col">
        <img src="https://placeimg.com/400/180/animals">
      </div>

      <div class="col third-col">
        <img src="https://placeimg.com/400/180/animals">
      </div>

    </div>
  </div>
</div>

Answer 1

Итак, все идет хорошо и просто - просто задайте фиксированную высоту для текста, показанного под каждой фотографией.Вам придется определиться с этой высотой в зависимости от вашей «средней высоты текста» и использовать overflow:hidden или использовать максимально возможное значение.

.subtitle {
  line-height:20px;
  height:40px;
  overflow:hidden;
}

Вот рабочая jsfiddle: https://jsfiddle.net/scooterlord/7wqmf1Lr/

edit: вот еще один способ подделать его.Для первого столбца вместо img просто используйте элемент div с фоновым изображением.Безопасно предполагая, что второй столбец может иметь переменную высоту, разверните div с фоновым изображением в первом столбце, чтобы использовать всю высоту первого столбца, а затем добавьте вторую строку для одного или нескольких текстов ниже.Это может быть немного сложно для отзывчивости -eg изменить высоту фонового изображения div на абсолютное значение или добавить несколько слоев одного и того же текста, чтобы скрыть / показать в определенных разрешениях (или использовать вместо этого JS), но это, безусловно, выполнимо ипрямое решение вашей проблемы.

Если хотите, я также могу помочь с реализацией отклика - хотя и не входит в сферу этого вопроса.

Заменили тег img наdiv и background-image:

<div class="img" style="background-image:url(https://placeimg.com/400/480/animals)">
</div>

Добавлено css:

.img {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

Рабочая скрипка.https://jsfiddle.net/scooterlord/7wqmf1Lr/13/