Отступы в последующих строках переносимого текста метки

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

Чтобы добиться отступа во второй и последующих строках, используя только CSS, рассмотрите возможность использования следующего подхода:

Заключите элемент ввода и его метку в родительский контейнер с помощью класса "checkbox-field". Установите свойство display этого родительского элемента на "flex" и flex-direction на "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

Пример использования:

  
  Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem

Это решение гибко адаптирует текст метки к доступной ширине, сохраняя при этом единообразный внешний вид.