仅修改指定div类实现单选按钮对齐、前缀文本下堆叠说明文本

• 实现效果：将This is label文本堆叠在Prefix Text正下方，单选按钮保持与Prefix Text水平对齐
• 约束条件：
  • 尽可能不改动.label-container类原有样式，必须保留其display: inline-flex属性，方便后续在Prefix Text前添加图标
  • 优先仅通过修改包裹This is label的div元素类样式实现效果

原有CSS #

.label-container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.label-text {
  display: flex;
  justify-items: center;
  align-items: center;
  height: 100%;
}

.prefix {
  font-weight: bold;
}

.text-spacing {
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

原有HTML #

<label class="label-container">
    <input type="radio" />
    <div class="label-text text-spacing prefix">Prefix Text</div>
    <div class="label-text text-spacing">This is label</div>
</label>

完全可以实现，以下两种方案都不会破坏原有布局逻辑，也不影响后续在Prefix Text前添加图标。

方案1：最小侵入实现（几乎不动原有类） #

仅需要给.label-container加1行position: relative;——这个属性不会改变原有flex布局的任何表现，只是为内部定位提供参照，无任何副作用，其余改动全部在包裹This is label的div上完成。
给包裹This is label的div新增自定义类，追加以下样式：

.sub-label {
  position: absolute;
  left: 24px; /* 数值=单选按钮宽度(默认约16px) + 文本左内边距(8px)，可根据实际单选按钮尺寸微调 */
  top: 1.5em; /* 数值等于单行文本行高，微调至刚好落在Prefix Text正下方 */
  padding-inline-start: 0; /* 覆盖原有text-spacing的左内边距，避免偏移 */
}

修改后对应的HTML片段：

<div class="label-text text-spacing sub-label">This is label</div>

方案2：稳定适配版（支持动态内容） #

如果可以接受给.label-container加2行不影响原有逻辑的属性，实现效果更稳定，后续加图标、修改文本长度都不需要重新调整偏移值：

1. 给.label-container追加2行属性，原有属性全部保留：

.label-container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  /* 新增以下2行 */
  flex-wrap: wrap;
  align-items: flex-start;
}

2. 给包裹This is label的div新增自定义类，追加以下样式：

.sub-label {
  flex: 0 0 calc(100% - 24px); /* 宽度占满剩余行，触发自动换行 */
  margin-left: 24px; /* 偏移量和方案1一致，对齐到Prefix Text左边缘 */
  margin-top: 4px; /* 两行文本的垂直间距，可按需调整 */
  height: auto; /* 覆盖原有.label-text的height:100%，避免高度异常 */
  padding-inline-start: 0;
}

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