Html 调整浏览器窗口大小时固定两个菜单块中的文本

我有两个菜单项排成一行。每个菜单项都是带有图标和文本的范围。块的高度大于图标，因为将鼠标悬停在块上时有额外的逻辑。我已经简化了示例，并且没有包含此代码

当浏览器窗口缩小到一定大小时。其中一个块中的文本（取决于标题的长度）下移一行。 在第二阶段，它保持在同一水平。它看起来很丑

应进行哪些更改以同步两个块的显示？尝试应用样式 .省略号

{
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

标记h5

但这没有任何好处。 在这里进行操作的最佳方式是什么？

.dx项{
大纲：0；
}
.dx框项目内容{
字体大小：14px；
}
.dx小部件{
颜色：rgba（0,0,0,87）；
字体大小：400；
字体大小：14px；
字体系列：Roboto，Roboto Fallback，“Noto Kufi阿拉伯语”，Helvetica，Arial，无衬线；
线高：1.2857；
}
.dx卡{
盒影：0 1px 3px rgba（0,0,0,12），0 1px 2px rgba（0,0,0,24）；
边界半径：4px；
背景色：#fff；
利润率：2倍2倍3倍；
}
.iconStylePl10{
右侧填充：30px；
左侧填充：10px；
}
.我的风格{
显示：内联；
字体大小：100%；
}
法先生，
.fas{
字体系列：“字体真棒5免费”；
字号：900；
}
.fa fw{
文本对齐：居中；
宽度：1.25em；
}
.adk卡{
宽度：100%；
身高：97%；
盒影：0.10px rgba（0,0,0,0.5）；
}
.adk卡：悬停{
背景：rgba（0,0,0,0.01）；
}
h5{
文本对齐：左对齐；
字体大小：120%；
字体大小：粗体；
}
.h5座{
高度：45px；
显示：块；
溢出：隐藏；
文本对齐：居中；
文本溢出：省略号；
-webkit线夹：1个；
-webkit盒方向：水平；
}
dxi项目：非（.item card）：悬停{
光标：指针；
背景：rgba（0,0,0,0.03）；
}
斯潘酒店{
显示：内联块；
垂直对齐：120%；
线高：正常；
边缘顶部：20px；
边缘底部：2px；
}
.绿色{
颜色：#00b373；
}
.省略号{
显示：块；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

超长字幕
简单标题

为

adk卡类添加这两条规则（
显示：flex；
和
对齐项目：居中；
）

     .adk-card {
        display: flex; /*add*/
        align-items: center; /*add*/
        width: 100%;
        height: 97%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }