Expand item and push others outside of visible parent

I have a series of bars that when clicked expand their width.
the series of bars live inside a parent container with set width and height (marked in dotted orange line in the pic)

I want the expanded bar to fill 90% of the visible width of the parent container (centered)
and push the other non-expanded bars to the sides (left and right) outside of the visible width.

right now, the CSS transition changes the width of the clicked bar
and just pushes the elements to its right outside of the parent container (see pic)

I tried using flex-grow but this approach always tries to fit all the bars inside the parent container.

heres the read only link:
[Webflow - David]
(how to access public share link)