CSS: How can I put the i icon next to the text

I have a this kind of parent div element (display: flex) containing two children elements

Text - a span element
(i) Icon - a div element

When the text is only one line (not wrapped) everything is ok. however, when it is wrapped (2+ lines) the width of the element is according the the most wide line

I do want the text to be wrapped when it's long.

enter image description here

In the above example, i would like the (i) icon next to the NORTH.

I would like the (i) icon next to the NORTH.

Solution

If you simply want the icon to always be next to the word "North", just put it inside the span:

.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>Drag Corner to Resize</h3> 
<div class="flex">
  <span>THE KING OF THE NORTH <i class="fa-solid fa-image"></i></span>
  </div>