Recuo de linhas subsequentes do texto da etiqueta quebrada

Quando confrontado com restrições na largura do formulário, o texto da etiqueta pode quebrar em várias linhas, levando a uma estética preocupações. Embora a primeira linha seja recuada devido à presença de um elemento de entrada, as linhas subsequentes podem não ser, criando uma aparência irregular.

Para obter a segunda linha recuada e as linhas subsequentes usando apenas CSS, considere usar a seguinte abordagem:

Coloque o elemento de entrada e seu rótulo dentro de um contêiner pai com a classe "checkbox-field". Defina a propriedade de exibição deste pai como "flex" e a direção flexível como "row".

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

Exemplo de uso:

  
  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

Esta solução ajusta de forma flexível o texto da etiqueta à largura disponível, mantendo uma aparência visual consistente.