tailwind1-4  Exercise 1: A Navigation Bar and the Class That Pushes the Button
==============================================================================

<nav id="nav" class="flex items-center gap-6 px-6 py-3 border-b border-gray-200">
  <a id="logo" class="text-lg font-bold">Acme</a>
  <ul id="links" class="flex gap-4"><li>Home</li><li>Docs</li><li>Pricing</li></ul>
  <a id="signin" class="ml-auto rounded-md bg-blue-600 px-3 py-1.5 text-white">Sign in</a>
</nav>

  flex              the three children sit in one row
  items-center      each child is centred on the cross axis (vertically)
  gap-6             24px between children
  px-6 py-3         24px at the sides, 12px above and below
  flex gap-4 (ul)   the three links are their own small flex row with 16px between them
  ml-auto           the button's left margin takes up ALL the free space, pushing the button to the right end

Measure it (the page is 900px wide). Paste into the browser console:

  const R = id => document.getElementById(id).getBoundingClientRect();
  const nav = R('nav'), logo = R('logo'), links = R('links'), btn = R('signin');
  console.log({
    logoLeft: logo.left - nav.left,
    gapLogoToLinks: links.left - logo.right,
    buttonRightGap: nav.right - btn.right,
    centreY: [logo, links, btn].map(b => b.top + b.height / 2 - nav.top)
  });

Output (measured in headless Chrome):

  with ml-auto:     logo 24 to 71.53, links 95.53 to 253.34, button 803.83 to 876
                    logoLeft 24, gap logo-to-links 24, buttonRightGap 24, centre lines [30, 30, 30]
  without ml-auto:  logo 24 to 71.53, links 95.53 to 253.34, button 277.34 to 349.52
                    buttonRightGap 550.48, centre lines [30, 30, 30]

WHY THIS WORKS AS AN ANSWER
---------------------------
All three children have the same centre line (30px from the top of the bar) because items-center centres each one on the cross axis, whatever its own height
(the button is taller than the plain-text links).
The left padding is 24px (px-6) and so is the space to the right of the button: ml-auto leaves no room between the button and the bar's padding, so it ends exactly at
900 - 24 = 876px. The logo-to-links gap is the container's gap-6, 24px.
Without ml-auto nothing claims the free space: justify-content defaults to flex-start, so the items pack at the left and the button starts 24px after the links
(253.34 + 24 = 277.34). The 550.48px of leftover space is on the right. An auto margin in a flex container absorbs free space on its side, which is why it is the
standard way to push one item (or a group) to the far end; justify-between would also spread the items, but would push the links to the middle, not keep them
next to the logo.