CODEWITHSUNDEEP
tailwind-css
Joe
Joe

Reputation: 1045

Space two elements to opposite ends of containing element while retaining vertical alignment using tailwindcss

I've got some button text that I want on the far left of its containing li element and a right arrow svg to the far right of the same containing li element while also keeping the text and the svg arrow aligned to center vertically. I've got the aligned vertically part working well, but am struggling with the left right spread. I am using tailwindcss as you can see.

    <div class="container mx-auto w-full lg:w-3/5 px-2 pt-2 mt-2">

    <ul>
        <li class="bg-white border-b-4 border-orange-500 p-2">
            <button
            class="text-xl text-orange-500 font-bold py-2 px-4 rounded inline-flex items-center">
            <span>Languages</span>
            <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                >
                <path
                d="M0 7.00002V9.00002H12L6.5 14.5L7.92 15.92L15.84 8.00002L7.92 0.0800171L6.5 1.50002L12 7.00002H0Z"
                fill="#140E08"
                />
            </svg>
            </button>
        </li>
    </ul>
    </div>

The inline-flex and items-center achieves the vertical alignment. It seems like justify-between would be the ticket, but I haven't found how to use it in this case yet without disturbing the vertical alignment. I am new to tailwindcss.

If you want to play with it, here it is: https://play.tailwindcss.com/MDPPJrQuxk

Thanks in advance for your help.

Upvotes: 2

Views: 2858

Answers (1)

Mohamed Ghulam
Mohamed Ghulam

Reputation: 537

Yes, you need to add justify-between class to your button, but keep in mind that the button's default width is the content width, and that's why you are not seeing any difference.

To fix that, add a w-full class to your button so it will take the full space of its container.

    <div class="container mx-auto mt-2 w-full px-2 pt-2 lg:w-3/5">
      <ul>
        <li class="border-b-4 border-orange-500 bg-white p-2">
          <button class="inline-flex items-center justify-between w-full rounded py-2 px-4 text-xl font-bold text-orange-500">
            <span>Languages</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 7.00002V9.00002H12L6.5 14.5L7.92 15.92L15.84 8.00002L7.92 0.0800171L6.5 1.50002L12 7.00002H0Z" fill="#140E08" />
            </svg>
          </button>
        </li>
      </ul>
    </div>

output:

enter image description here

Upvotes: 4

Related Questions