Centering specific part in flex container

Question

Goal: Align the three control buttons horizontally at center.

I have code for container having four buttons. I want the three control buttons(previous, play, next) to be aligned at center, like they are without the shuffle button added. But with it added, they are now not at center, as now all four buttons are aligned at center. Is there a way I can keep those three buttons aligned at center instead of being pushed by the shuffle button, while keeping the shuffle button at left of those three buttons and not centered? I tried using position: absolute; left: 0 on the shuffle button and that worked, but I would like to find out another way without absolute positioning since it could cause issues in the future.

Code: https://sololearn.com/compiler-playground/Wmdl4IIURlW3/?ref=app

Answer 1

What if you made 3 divs and put the 3 buttons in the middle div with space-between then the shuffle button on the right in the first div.
There probably a simpler solution but that would be my first try.

Answer 2

Zvi Yeah it is something that works, thanks for the solution. But as you said, there could really be a better solution which is more flexible.