CSS: отображать две строки как один встроенный тег в тексте ⇐ CSS

[Anonymous]

Я хочу разработать в HTML/CSS единую бюрократическую форму, где поля помечены под строкой. Вот такой:





Я пытался использовать inline-flex для этих полей:

HTML:

Длинный текст бюрократического документа. Комиссия в составе: Джон Доу, Джон Доу, Джон Доу, Джон Доу, Джон Доу, Джон Доу (список членов комиссии) решил, что устройство готово к проверке и тестированию.

CSS:

.labeled-field { дисплей: встроенный гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; гибкое направление: столбец; } .field-text { граница-низ: сплошная 0,05 бэр; выравнивание текста: по центру; } .field-label { размер шрифта: 0,8рем; } Однако inline-flex отображается как inline-block и вместо переноса слов переносит весь блок .labeled-field:



Так как же отобразить .labeled-field как inline с переносом слов?