<p>J'ai un élément div parent comme celui-ci (affichage : flex), contenant deux éléments enfants</p> <ol> <li>Texte - un élément span</li> Icône <li>(i) - un élément div</li> </ol> <p>Lorsque le texte ne comporte qu'une seule ligne (sans saut de ligne), tout fonctionne correctement. Cependant, lorsqu'il s'enroule (2 lignes ou plus), la largeur de l'élément s'ajustera en fonction de la ligne la plus large</p> <p>Je souhaite que le texte soit renvoyé à la ligne lorsqu'il est plus long. </p> <p>Dans l'exemple ci-dessus, je souhaite que l'icône (i) soit à côté de NORD. </p> <p>Je veux que l'icône (i) soit à côté de NORD. </p>

.flex
{
  display:flex;
  align-items:center;
  resize: both;
  overflow:auto;
  background: #99AAAA;
  max-width: fit-content;
   max-height: fit-content;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<h3>拖动角落进行调整大小</h3> 
<div class="flex">
  <span>THE KING OF THE NORTH <i class="fa-solid fa-image"></i></span>
  </div>