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

This example demonstrates the "Gotcha": `justify-between` distributes space between all direct children items. If you have more than two, the space is divided among them.

Scenario: Three individual items

Item 1 (Leftmost)

Item 2 (Middle)

Item 3 (Rightmost)

Gotcha in action: Notice how `justify-between` on the parent div distributes "Item 1", "Item 2", and "Item 3". "Item 1" is at the start, "Item 3" is at the end, and "Item 2" is in the middle with space on both sides. This might not be what you want if you intended "Item 1" and "Item 2" to be grouped left, and only "Item 3" pushed right.

Scenario: Two groups, one with multiple items

Grouped A

Grouped B

Item C

This works as expected because `justify-between` is acting on two direct children: the `div` containing "Grouped A" and "Grouped B", and the `div` containing "Item C".