In navbar tailwind css, img is getting distorted rather than pushing elements beside

Question

1. I want to create the flag login button and sign up button
2. i used class="flex" and inside that an img
3. but as soon as i add the button image is getting distorted. how to avoid this

Expected Result

1. I want to create the flag, login button and sign up button
2. i used class="flex" and inside that an img
3. but as soon as i add the button image is getting distorted. how to avoid this

Result i am getting

<div class="flex">
          <img
            src=".//img/indianFlag.png"
            alt="IndianFlag"
            width="30px"
            height="20px"/>
          <button
            class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
            Log in
          </button>
        </div>

This is the complete code

<nav class="bg-deepBlue">
      <div
        class="relative w-[1080px] mx-auto flex items-center justify-between"
      >
        <!-- logo -->
        <a href="#" class="cursor-pointer py-7 pr-7">
          <img
            src="./img/razorpayLogo.png"
            alt="RazorpayLogo"
            width="125px"
            height="30px"
          />
        </a>
        <ul class="flex gap-x-6">
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payments</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Banking</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Line of Credit</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Payroll</a>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Resources</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Support</a>
            <div
              class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"
            ></div>
          </li>
          <li
            class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group"
          >
            <a href="#">Pricing</a>
          </li>
        </ul>
        <div class="flex">
          <img
            src=".//img/indianFlag.png"
            alt="IndianFlag"
            width="30px"
            height="20px"
          />
          <button
            class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md"
          >
            Log in
          </button>
        </div>
      </div>
    </nav>```

Answer 1

Flex layout children have align-self: stretch by default, which makes all the element children stretch to the tallest element. The button is taller than the <img> so the <img> stretches in height to be the same height as the button, hence the distortion. Consider overriding the default align-self: stretch by applying a different align-self, for example, align-self: center via the self-center class:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        deepBlue: 'darkblue',
        lightBlue: 'lightblue',
      },
    },
  },
};

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

<nav class="bg-deepBlue">
  <div class="relative w-[1080px] mx-auto flex items-center justify-between">
    <!-- logo -->
    <a href="#" class="cursor-pointer py-7 pr-7">
      <img src="https://picsum.photos/125/30" alt="RazorpayLogo" width="125px" height="30px" />
    </a>
    <ul class="flex gap-x-6">
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Payments</a>
        <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Banking</a>
        <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Line of Credit</a>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Payroll</a>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Resources</a>
        <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Support</a>
        <div class="absolute bottom-0 w-full h-1 bg-lightBlue hidden group-hover:block transition-all duration-200"></div>
      </li>
      <li class="text-white font-mullish py-7 hover:text-lightBlue cursor-pointer transition-all duration-200 relative group">
        <a href="#">Pricing</a>
      </li>
    </ul>
    <div class="flex">
      <img src="https://picsum.photos/30/20" alt="IndianFlag" width="30px" height="20px" class="self-center" />
      <button class="py-3 px-5 font-mullish text-white border-lightBlue border-2 rounded-md">
            Log in
          </button>
    </div>
  </div>
</nav>