Mise en retrait des lignes suivantes du texte d'étiquette enveloppé

Lorsque vous êtes confronté à des contraintes de largeur de formulaire, le texte d'étiquette peut s'enrouler sur plusieurs lignes, ce qui conduit à une esthétique préoccupations. Bien que la première ligne soit en retrait en raison de la présence d'un élément d'entrée, les lignes suivantes peuvent ne pas l'être, créant une apparence inégale.

Pour obtenir une deuxième ligne en retrait et les lignes suivantes en utilisant uniquement CSS, envisagez d'utiliser l'approche suivante :

Entourez à la fois l'élément d'entrée et son étiquette dans un conteneur parent avec la classe "checkbox-field". Définissez la propriété d'affichage de ce parent sur "flex" et la direction flex sur "row".

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

Exemple d'utilisation :

  
  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

Cette solution ajuste de manière flexible le texte de l'étiquette à la largeur disponible tout en conservant une apparence visuelle cohérente.