CSS实现图标居左、文本在图标右侧排列且不换行到下方的方法

你可以通过flex布局快速实现需求，仅需要修改CSS并给HTML的文字内容增加一层包裹容器即可，代码如下：

完整CSS代码 #

.column {
  float: left;
  width: 50%;
  padding: 10px 0px;
  min-height: 120px; /* 替换原有固定height，避免内容过长溢出，可按需改回固定值 */
  display: flex;
  align-items: flex-start; /* 图标与内容顶部对齐 */
  gap: 12px; /* 图标和内容的间距，可自行调整 */
}
/* 图标固定样式 */
.column .fa {
  flex-shrink: 0; /* 禁止图标被压缩 */
  font-size: 22px; /* 图标大小可按需修改 */
  margin-top: 2px; /* 微调和第一行文字的对齐位置 */
}
/* 右侧内容容器 */
.content-wrapper {
  flex: 1; /* 占满图标外的剩余宽度 */
}

完整HTML代码 #

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="MED column">
  <i class="fa fa-user-o"></i>
  <!-- 新增内容包裹层，所有文字内容放在这个容器内 -->
  <div class="content-wrapper">
    <span style="text-decoration: underline;"><b>Medical Bill reimbursemenet employee</b></span>
    <div><span id="MED"></span><span> per biweekly paycheck</span></div>
    <div class="subscript">The vision plan lets you save contacts.
    </div>
  </div>
</div>
<div class="ADD column">
  <i class="fa fa-envelope-o"></i>
  <!-- 新增内容包裹层，所有文字内容放在这个容器内 -->
  <div class="content-wrapper">
    <span style="text-decoration: underline;"><b>Accidental Death and Dismemberment of employee </b></span>
    <div><span id="ADD"></span><span> per biweekly paycheck</span></div>
    <div class="subscript">You and your family be enrolled.
    </div>
  </div>
</div>

兼容旧浏览器的替代方案 #

如果需要兼容IE9及更早版本，可以改用浮动方案，不需要给.column加flex相关样式，替换为以下CSS即可：

.column .fa {
  float: left;
  margin-right: 12px;
  font-size: 22px;
}
.content-wrapper {
  overflow: hidden;
}

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