CSS: Bagaimanakah cara saya meletakkan ikon di sebelah teks?

Question

Saya mempunyai elemen div induk seperti ini (paparan: flex), mengandungi dua elemen anak

1. Teks - elemen span
ikon
2. (i) - elemen div

Apabila teks hanya satu baris (tiada pemisah baris), semuanya berfungsi dengan baik. Walau bagaimanapun, apabila ia membalut (2 baris atau lebih), lebar elemen akan melaraskan berdasarkan garis terluas

Saya mahu teks dibalut apabila lebih panjang.

Dalam contoh di atas, saya mahu ikon (i) berada di sebelah UTARA.

Saya mahu ikon (i) berada di sebelah UTARA.

Answer 1

Jika anda hanya mahu ikon sentiasa berada di sebelah perkataan "Utara", letak sahaja di dalam 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>