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

<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>

.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); //ポイント
}