Табличная компоновка с двумя элементами inline-block рядом?

Я создаю веб-страницу, которая отображает информацию пользователя. Это выглядит так:

Как показано в цветной легенде, форма содержит ярлык и упорядоченный список. 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 для списка возможно, поэтому не стесняйтесь рекомендовать альтернативу, если это поможет.

Вот скрипка макета со всеми соответствующими стилями, которые вы можете использовать в качестве ссылки.