我正在构建一个显示用户信息的网页。它看起来像这样：
如彩色图例所示，表单包含一个标签和一个有序列表。CSS 已用于同时提供这两者display: inline并使列表显示为以逗号分隔的组名列表。这是相关的 HTML 片段：
<label>Group membership</label>
<ol>
<li>domain users</li>
<li>denied rodc password replication group</li>
</ol>
问题
整个表单的宽度是未知的（它是流动的）。标签具有固定宽度以支持右对齐文本，但有序列表可以自由地水平消耗剩余的可用空间。
但是，当组列表变大时会发生这种情况：
该列表需要比水平可用空间更多的空间，因此它向下移动并看起来与标签分离，并且标签/显示元素对齐超出了窗口。这看起来真的很糟糕。
我想要达到的目标
该列表应根据需要向下扩展，但应保持锚定在标签旁边（就像在两个单元格具有的基于表格的布局中发生的那样vertical-align: top）。
是否有一种 CSS 技术可以轻松实现这一点？实现目标的侵入性最小的方法是什么？在整个应用程序中以相同的方式设置了大量的表单，因此从根本上更改 CSS 很容易影响其他表单，因此是不切实际的。
对列表的 HTML 进行外科手术是可能的，因此如果有帮助，请随时推荐替代方案。
这是一个模型的小提琴，其中包含您可以用作参考的所有相关样式。