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

Question

I have a parent div element like this (display:flex), containing two child elements text - a span element (i) icon - a div element. When the text only has one line (without wrapping), everything works fine. However, when it wraps (2 lines or more), the width of the element will adjust based on the widest line. I want the text to wrap when the length is longer. In the above example, I want the (i) icon to be next to NORTH. I want the (i) icon to be next to NORTH.

P粉113938880 · Answer

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;
}


拖动角落进行调整大小 

  THE KING OF THE NORTH