Как сделать блоки текста на одном уровне?

Question

[besstrashnii]

Как выровнять текст в блоке block__text на одном уровне? Высота блоков должна быть одинакова
Желательно решение на flexbox

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.block {
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 363px;
  background: #eaeaea;
  border-radius: 15px 0 0 0;
}

.block .block__title {
  padding: 26px 0 0 30px;
  width: 230px;
  font-family: league_gothicregular, serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #076e9f;
  font-size: 22px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
}

.block .block__title .block__subtitle {
  color: #878787;
  font-family: "Arial MT", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-transform: none;
}

.block .block__title .block__subtitle .primary-color {
  color: #076e9f;
  text-decoration: none;
  font-weight: 600;
}

.block .block__title .block__subtitle .primary-color:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #90d4f5;
}

.block .block__text {
  padding: 10px 10px 5px 30px;
  color: #5c5c5c;
  font-family: "Arial MT", serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
}

.block .block__text .block__more {
  color: #076e9f;
  text-decoration: none;
}

.block .block__text .block__more:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #90d4f5;
}

<div class="wrapper">
  <div class="block">
    <div class="block__title">
      TITLE FOR THIS BLOCK
      <div class="block__subtitle">
        Posted by <a class="primary-color">Name</a> on <a class="primary-color">Date</a>
      </div>
    </div>
    <div class="block__text">
      <p>
        Donec sed odio dui. Duis mollis, est non commodo luctus, <br> nisi erat porttitor ligula, eget lacinia odio sem nec elit. <br> Sed posuere consectetur est at lobortis.
      </p>
      <a class="block__more">more...</a>
    </div>
  </div>
  <div class="block">
    <div class="block__title">
      TITLE FOR THIS BLOCK ON TWO ROW
      <div class="block__subtitle">
        Posted by <a class="primary-color">Name</a> on <a class="primary-color">Date</a>
      </div>
    </div>
    <div class="block__text">
      <p>Donec sed odio dui. Duis mollis, est non commodo luctus, <br> nisi erat porttitor ligula, eget lacinia odio sem nec elit. <br> Sed posuere consectetur est at lobortis. Eget lacinia odio sem nec elit. <br> Sed posuere consectetur est at lobortis.eget
        lacinia...
      </p>
      <a class="block__more">more...</a>
    </div>
  </div>
</div>

Answer 1

[Андрей]

У блока div с классом .block убрать justify-content: space-between;

Comments

[besstrashnii]

высота двух блоков должна быть одинакова.

[Rustam Bainazarov]

besstrashnii, это свойство не влияет на высоту блоков.

Answer 2

[Ankhena]

Вообще js.

https://jsfiddle.net/ey4kx859/
Уберите у .block justify-content: space-between, а тексту допишите flex-grow: 1;
Но работать это будет до тех пор, пока высота остального контента одинакова.

p.s. зачем вы делаете вложенные селекторы, да еще и космического уровня, если пишете по БЭМу?

Comments

[besstrashnii]

стили пишу в scss, из-за этого при преобразовании в css так получается

[besstrashnii]

но как сделать, если заголовок в одном блоке в одну строку, а в другом на две строки?

[Ankhena]

besstrashnii,

стили пишу в scss, из-за этого при преобразовании в css так получается

Извините, но это бред. Препроцессор не заставляет вас делать вложенности.

но как сделать, если заголовок в одном блоке в одну строку, а в другом на две строки?
Написано 8 минут назад

На js. Либо фиксировать высоту и обрезать лишнее. Флексы ничего не знают об элементах в соседнем блоке.

[Андрей]

besstrashnii, в вопросе говорилось о block__text, а теперь спрашиваете/говорите за заголовок. Вы бы определились сразу что нужно и поставили правильно вопрос

[Ankhena]

Андрей, да нормально там всё в вопросе

[besstrashnii]

Ankhena, как тогда правильно писать вложенности scss и css в целом? просто я новичек в вебе и некоторые моменты для меня пока непонятны

[Ankhena]

besstrashnii, классический БЭМ это вообще плоское дерево.
По кодгайдам, хорошему тону и разуму обычно двойной вложенности достаточно.
Элемент не может существовать без блока, значит запись .block .block__elem {} избытычна и достаточно .block__elem {}

Answer 3

[igumenov]

Использую brm.io/jquery-match-height-demo