如何仅用CSS实现无指定宽度下随机交错嵌套标签的内容垂直对齐？

核心思路是利用CSS的:has()选择器识别不同类别的label，结合Grid布局或绝对定位，将short和long文本分别归入独立的垂直列，同时保留原有label和中间的lore ipsum内容正常显示，且无需指定固定宽度。

方案一：自适应宽度的Grid布局（推荐） #

该方案无需手动指定宽度，列宽会自动适配最长的文本内容：

label::after {
  content: ':';
  margin-right: 1ch;
}
label.s {
  background-color: #AAF;
}
label.l {
  background-color: #AFA;
}

/* 核心Grid布局设置 */
article {
  display: grid;
  grid-template-columns: max-content auto max-content;
  gap: 1ch;
  align-items: center;
}

/* 让中间的lore ipsum区块跨所有列 */
article > div {
  grid-column: 1 / -1;
  margin: 0.5em 0;
}

/* 让form的子元素直接成为Grid容器的项 */
form {
  display: contents;
  color: transparent; /* 隐藏原有的short/long文本 */
}

/* 让label保持可见，放在中间列 */
form label {
  color: initial;
  grid-column: 2;
}

/* 将short文本放到右侧列 */
form:has(label.s)::after {
  content: 'short';
  grid-column: 3;
  color: initial;
}

/* 将long文本放到左侧列 */
form:has(label.l)::after {
  content: 'long';
  grid-column: 1;
  color: initial;
}

方案二：绝对定位方案（兼容略广） #

如果需要兼容不支持:has()的旧浏览器，可调整为绝对定位实现（需预留大致空间，无需精确宽度）：

label::after {
  content: ':';
  margin-right: 1ch;
}
label.s {
  background-color: #AAF;
}
label.l {
  background-color: #AFA;
}

article {
  position: relative;
  margin-left: 15%; /* 给long列预留自适应空间 */
  margin-right: 10%; /* 给short列预留自适应空间 */
}

article > div {
  margin: 0.5em 0;
  position: relative;
  z-index: 1; /* 确保内容不被定位文本遮挡 */
}

form {
  display: block;
  margin: 0.5em 0;
  position: relative;
  color: transparent; /* 隐藏原文本 */
}

form label {
  color: initial; /* 保留label可见 */
}

/* 定位short文本到右侧垂直列 */
form:has(label.s)::after {
  content: 'short';
  position: absolute;
  left: calc(100% + 1ch);
  color: initial;
  white-space: nowrap;
}

/* 定位long文本到左侧垂直列 */
form:has(label.l)::after {
  content: 'long';
  position: absolute;
  right: calc(100% + 1ch);
  color: initial;
  white-space: nowrap;
}

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