如何用最简CSS实现左侧等高图标与右侧两行文本对齐

HTML结构 #

<div class="info-item">
  <span class="item-icon">📌</span>
  <div class="item-content">
    <p>第一行主文本</p>
    <p>第二行辅助文本</p>
  </div>
</div>

最简化CSS代码 #

.info-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文本间距可自行调整 */
}
.item-icon {
  font-size: 1em; /* 图标大小与当前文本高度一致 */
  line-height: 1;
}
/* 如果使用图片作为图标，替换上述.item-icon规则即可：
.item-icon {
  height: 1em;
  width: auto;
  display: block;
}
*/
.item-content p {
  margin: 0;
  line-height: 1.4; /* 行高可自行调整 */
}

该方案基于flex布局实现，无冗余属性，图标会自动跟随容器字体大小缩放适配等高需求，右侧两行文本默认左对齐。

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