<p>I have a parent div element (display: flex) like this, containing two child elements</p> <ol> <li>Text - a span element</li> <li>(i) icon - a div element</li> </ol> <p>When the text is only one line (no line breaks), everything works fine. However, when it wraps (2 lines or more), the element's width will adjust based on the widest line</p> <p>I want the text to wrap when it is longer. </p> <p>In the example above, I want the (i) icon to be next to NORTH. </p> <p>I want the (i) icon to be next to NORTH. </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>