Разбивка макета, когда заголовок сообщения переходит на следующую строку или стеки

Question

Макет ломается, когда подробный заголовок сообщения разбивается на две строки и вызывает увеличение высоты элемента.

Полный заголовок должен быть видимым и, следовательно, не может использовать что-то вроде text-overflow: ellipsis или hidden.

Установка min-height в элементе Title устраняет поломку.

Это наивный подход или можетэто должно быть улучшено?

:: Edit - Невозможно добавить JS, только CSS.

---

2 Расположение столбцов

---

Высота первого контейнера теперь больше, чем у соседних контейнеров

Answer 1

пожалуйста, посмотрите, что я решил с помощью CSS flex box

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.parent{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap ;
  flex-wrap: wrap;
  margin: 0 -15px;
  width: 100%;
  
}
.eachChid{
  width: 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding: 0 15px;
} 
.eachChid img{
  width: 100%;
  
}
.wrapper{
  padding: 0 15px;
}

<div class="wrapper">
<div class="parent">
  <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://storage.googleapis.com/afs-prod/media/afs:Medium:3700800010/775.jpeg" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9l0myTx3_TZEMQnJNvRnUJibglLctOfqLYmN9zfSrELVDfsG1" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like). over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
  
    <div class="eachChid">
    <img class="irc_mi" src="https://images.theconversation.com/files/199508/original/file-20171215-17857-cns8cs.jpg?ixlib=rb-1.1.0&amp;q=45&amp;auto=format&amp;w=926&amp;fit=clip" >
    <p>over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<p>
  </div>
</div>
</div>

Answer 2

Вы можете исправить это через css, например:

.box{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }