CSS: How do I place an icon next to text?

Question

I have a parent div element (display: flex) like this, containing two child elements

1. Text - a span element
2. (i) icon - a div element

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

I want the text to wrap when it is longer.

In the example above, I want the (i) icon to be next to NORTH.

I want the (i) icon to be next to NORTH.

Answer 1

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

.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>