Flexbox实现最后一个元素垂直居中对齐问题求助

我需要实现这样的布局：左侧垂直排列“Name Detail”和“Salary Detail”两个文本，右侧垂直居中显示一个图标。尝试了多种写法都没达到预期效果，现有代码如下：

现有代码 #

CSS #

.container {
  display: flex;
  flex-direction: column;
}

.element {
  display: flex;
}

.icon {
  display: flex margin-left: auto;
  align-content: center;
}

HTML #

<div className="container">
  <div className="element">Name Detail</div>
  <div className="element">Salary Detail</div>
  <div className="icon">(Here is a svg)</div>
</div>

期望效果 #

左侧垂直排列两行文本，右侧对应位置垂直居中显示图标，整体呈现左右分布的布局。

修正方案 #

问题出在容器的布局方向和元素结构上，调整后的代码如下：

修正后的CSS #

.container {
  display: flex;
  align-items: center; /* 让内部元素整体垂直居中 */
  gap: 1rem; /* 文本组与图标之间的间距，可按需调整 */
}

.text-group {
  display: flex;
  flex-direction: column; /* 实现两个文本垂直排列 */
  gap: 0.5rem; /* 两行文本之间的间距，可按需调整 */
}

.icon {
  display: flex;
  align-items: center; /* 图标自身垂直居中 */
  margin-left: auto; /* 自动填充左侧空间，将图标推到最右侧 */
}

修正后的HTML #

<div class="container">
  <div class="text-group">
    <div class="element">Name Detail</div>
    <div class="element">Salary Detail</div>
  </div>
  <div class="icon">(这里是SVG图标)</div>
</div>

关键修改说明 #

1. 把.container的flex-direction: column改成默认的row，让文本组和图标横向排列；
2. 新增.text-group容器包裹两个文本，通过flex-direction: column实现垂直排列；
3. 修正.icon的CSS语法错误（display: flex后补充分号），用margin-left: auto将图标靠右对齐，align-items: center确保图标与文本组垂直居中对齐；
4. 使用gap属性控制元素间距，替代传统的margin写法，布局更简洁可控。

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