Fontawesome Icons take different widths

Issue

I'm using Tailwind CSS along with Font Awesome Icons. Here the icons show like this,

Is it not suitable to adjust every div's width. Here is my code (For an element),

<!-- Navigation Link-->
        <div class="w-100 p-3 hover:bg-white/30">
          <div class="flex gap-4 text-white-max pl-3">
            <div>
              <i class="fas fa-tags"></i>
            </div>
            <div>Products</div>
          </div>
        </div>
<!-- End Navigation Link-->

My question is how to adjust this without changing every single element.

Solution

<script src="https://cdn.tailwindcss.com"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="w-100 p-3 hover:bg-white/30">
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-brands fa-fw fa-windows"></i>
    </div>
    <div>Dashboard</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-file-lines"></i>
    </div>
    <div>Documents</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-tags"></i>
    </div>
    <div>Products</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-cube"></i>
    </div>
    <div>Stock</div>
  </div>
</div>

Answered By - Mad max