Example 2: `justify-between` with More Than Two Groups (Gotcha)

This example demonstrates the "Gotcha": if you have more than two direct child elements (or groups) in a `flex justify-between` container, it spaces out the outermost groups to the edges, and the items in between are distributed.

Scenario: Three direct child items

Item 1 (Far Left)
Item 2 (Middle)
Item 3 (Far Right)

Explanation of the Gotcha:

`justify-between` distributes space *between* items. The first item aligns to the start, the last item to the end, and any remaining items are distributed evenly in the space between them.

If you need more complex grouping (e.g., two items on the left, one on the right), you'll need to either group the items on the left into a single flex child (nested flex) or use margin utilities like `ml-auto` (see next example).