行数が異なるテキストの高さを縦センター寄りにする方法

こんにちは。今日は「行数が異なるテキストの高さを縦センター寄りにする方法」について書きます！
イメージはこんな感じです↓

ではさっそくコードを見ていきましょう〜！

コード
1. HTML編
2. CSS編

コード

HTML編

        <div class="listBlock">
          <ul class="itemList">
            <li>
              <div class="liInner">
                <p class="tit"><span>テキストが入ります<br>テキストが入ります</span></p>
              </div>
            </li>
            <li>
              <div class="liInner">
                <p class="tit"><span>テキストが入ります</span></p>
              </div>
            </li>
            <li>
              <div class="liInner">
                <p class="tit"><span>テキストが入ります</span></p>
              </div>
            </li>
            <li>
              <div class="liInner">
                <p class="tit"><span>テキストが入ります<br>テキストが入ります<br>テキストが入ります</span></p>
              </div>
            </li>
          </ul>
        </div>

CSS編

.listBlock .itemList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}

.listBlock .itemList > li {
  width: 25%;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

.listBlock .itemList .liInner {
  height: 100%; //箱の高さ合わせる
  box-sizing: border-box; //箱の高さ合わせる

  background-color: #b9e3f9;
  padding: 35px 15px;
}

.listBlock .itemList .tit {
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;
  line-height: 1.4;
  font-size: 1.6rem;

  min-height: calc(2 * 1.4em); //ポイント
}

ちなみに、ブラウザ上で4つ並べてみたらこんな感じです↓

ちなみに背景を見てもらうとわかるのですが、箱自体の高さも合わせています。