Html 垂直对齐文本引导4

再一次，我需要你的帮助

我的项目有个问题。在我的菜单上，当我选择其中一个时，我希望边框位于菜单的底部，文本垂直对齐，但

垂直对齐：中间带有
显示表
的
中断了我所有的菜单

这是我的代码：


.infosbtn{
文本转换：大写；
颜色：#482A81；
盒影：0px 3px 10px#888；
}
.infos btn>div:悬停{
光标：指针；
}
.选定的btn{
边框底部：3px实心#482A81；
颜色：#482A81；
字体大小：粗体；
}

菜单
菜单
菜单
菜单比其他的长
菜单
尝试宽度：50%，因此它将始终从屏幕的50%开始。
将HTML代码替换为以下代码：“对齐项目中心”类添加到父div

<div class="row text-center px-3 align-items-center infos-btn">
            <div class="col-md col-sm py-3 selected-btn">Menu</div>
            <div class="col-md col-sm py-3">Menu</div>
            <div class="col-md col-sm py-3">Menu</div>
            <div class="col-md col-sm py-3">Menu longer than others</div>
            <div class="col-md col-sm py-3">Menu</div>
</div>


菜单
菜单
菜单
菜单比其他的长
菜单
看看flexbox：