Sometimes, you might have several items that should stay grouped on the left, and only one specific item needs to be pushed to the far right. In such cases, `ml-auto` (margin-left: auto) on the item you want to push can be a more direct solution than `justify-between` on the parent, especially if `justify-between` would undesirably space out all left-side items.
If we just use `flex` without `justify-between` or `ml-auto`, items stack left. If we used `justify-between` with many items, they'd all spread out.
All items are on the left. We want "User Actions" on the far right.
Apply `ml-auto` to the "User Actions" div. This will consume all available space to its left, effectively pushing it to the right. The parent container is `flex`.
The `ml-auto` class on "User Actions" assigns an automatic left margin, which takes up all available horizontal space within the flex container, pushing "User Actions" to the far right. The other items remain grouped on the left. This is very useful when `justify-between` on the parent container isn't desired because you don't want all immediate children to be spaced out.