Как сделать такое же расстояние текста от заголовка как на макете?

Добрый вечер, как сделать такое же расстояние текста от заголовка как на макете у двух блоков.

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

.middle .middle__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 363px;
  height: 186px;
  margin: 18px 0 0 14px;
  background: #eaeaea;
}

.middle .middle__block .middle__title {
  padding: 26px 0 0 30px;
  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;
}

.middle .middle__block .middle__title .middle__subtitle {
  color: #878787;
  font-family: "Arial MT", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-transform: none;
}

.middle .middle__block .middle__title .middle__subtitle .primary-color {
  color: #076e9f;
  text-decoration: none;
  font-weight: 600;
}

.middle .middle__block .middle__title .middle__subtitle .primary-color:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #90d4f5;
}

.middle .middle__block .middle__subject {
  padding: 0 0 0 30px;
  color: #5c5c5c;
  font-family: "Arial MT", serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
}

.middle .middle__block .middle__subject .middle__more {
  color: #076e9f;
  text-decoration: none;
}

.middle .middle__block .middle__subject .middle__more:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #90d4f5;
}

<div class="middle">
  <div class="block-wrap">
    <div class="middle__block">
      <div class="middle__title">
        NEW ATTRACTIONS
        <div class="middle__subtitle">
          Posted by <a class="primary-color">John Doe</a> on <a class="primary-color">10 Nov 2013</a>
        </div>
      </div>
      <div class="middle__subject">
        <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="middle__more">more...</a>
      </div>
    </div>
  </div>
  <div class="block-wrap">
    <div class="middle__block">
      <div class="middle__title">
        LET’S MEET ON OLD MARKET SQUARE IT WILL BE FUN
        <div class="middle__subtitle">
          Posted by <a class="primary-color">John Doe</a> on <a class="primary-color">09 Nov 2013</a>
        </div>
      </div>
      <div class="middle__subject">
        <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="middle__more">more...</a>
      </div>
    </div>

  </div>
</div>