如何对齐不同字号文本与图标并避免文本错误换行？

对齐文本和图标时遇到问题：.our-numbers-value 类的字体尺寸比 .our-numbers-text 大，导致文本所在的div被撑高，图标与这个div整体对齐。给文本所在div添加 align-items:center 后，最后一段文本出现错误换行，显示效果很差。

CSS代码 #

.numbers-image {
     width: 30px;
     height: 30px;
     margin-right: 15px;
}
.flex-align-center {
     display: flex;
     align-items: center;
}
.text-nowrap {
     white-space: nowrap;
}
.our-numbers-text {
     color: #061c3d;
     font-weight: 700;
     font-size: 32px;
}
.our-numbers-value {
     color: #061c3d;
     font-weight: 700;
     font-size: 52px;
}

HTML代码 #

<div class="flex-align-center">
   <div>
      <img class="numbers-image" src="./assets/svg/paid.svg" alt="" />
   </div>
   <div class="flex-align-center">
      <span class="our-numbers-text text-nowrap">More then</span>
      <span class="our-numbers-value">0</span>
      <span class="our-numbers-text">
      million in sales of air conditioning equipment.
      </span>
   </div>
</div>

当前效果 #

预期效果 #

内容的提问来源于stack exchange，提问作者Prati