flexboxで横並びliにて複数行のバラバラな高さを揃えたい

CSS3 - flexboxで横並びliにて複数行のバラバラな高さを揃えたい｜teratail

を参考にしました。少しコードを少なくしていますが、上記リンクとほぼ内容は一緒です。

<div class="h_section h_navi">
<ul>
<li><a href="">あああ</a></li>
<li><a href="">いいい</a></li>
<li><a href="">ううう<br>ううう</a></li>
<li><a href="">えええ</a></li>
<li><a href="">おおお<br>おおお</a></li>
</ul>
</div>

上記htmlにflexboxに関する一連のcssを単純に当てつつborder-leftをつけると、brしたborderが長く、brしていないborderが短くなってしまい、歪です。

そこで、a要素にも高さやflexboxなどcssを追記しました。それが下記です。

.h_navi ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h_navi ul li{
  border-left: 1px solid #dadad9;
}
.h_navi ul li:last-child{
  border-right: 1px solid #dadad9;
}
.h_navi ul li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:100px;
}