Верстка печатных форм на CSS flexbox, как правильно делать?

Question

[litvinenkow]

Господа умудренные верстальщики, подскажите это вообще возможно?
В общем пытаюсь сделать печатные формы на CSS и понимаю что это не так-то просто. Перепробовал уже кучу разных вариантов и flexbox и inline-block. Ниже картинка для понимания сути вопроса.
В печатных формах есть заголовок и т.н. поле для ввода информации. Так вот должно выглядеть как на рисунке 1.
А получается что флексом, что инлайн-блоками как на рисунке 2. То есть хотелось бы чтобы контент шел сразу за лейблом, а он переносится на следующую строку.
Суть использования флекса и инлайн-блоков в том, что задача может осложниться видом как на рисунке 3, там получается как бы два поля на одну строку и оно может быть не заполнено или заполняться позже, т.е. надо оставить место под контент задав ему ширину.
Верстку таблицами не предлагать)

Answer 1

[Николай]

Используйте сетку, можно даже bootstrap. Там это будет выглядеть примерно так:

<div class="container">
  <div class="row">
    <div class="col-4">
      1 of 2
    </div>
    <div class="col-8">
      2 of 2
    </div>
    <div class="col-12">
      1 of 3
    </div>  
  </div>
</div>

Comments

[litvinenkow]

Вы видимо не поняли, всё что отмечено синим - это ОДНО и то же поле (по сути один элемент), которое неразрывно должно переноситься на следующую строку.

[Николай]

litvinenkow, инпут в любом случае не перенести на другую строку. Без извращений на JS ваша задача не выполнима)

[litvinenkow]

Николай, это не "инпут" в классическом смысле вэба, это поле на печатной форме которое выглядит просто как подчеркивание на бумаге

[Николай]

litvinenkow, тогда не понимаю, чем вас не устраивает решение? )

[litvinenkow]

Тем, что если в этом поле будет текст, то его надо будет делить между двумя строками, а хочется, чтобы это было автоматом без подсчетов букв и прочих костылей. Просто суть в том, что там может быть текст, а может его и не быть и должна быть "рыба" в виде ________________________ , напоминаю - это печатная форма.

[Николай]

litvinenkow, тогда имхо, средствами CSS вашу задачу не решить. Как минимум - использовать JS