How to ensure that a div is always centered when another one disappears after an animation?

(CSB for reference)

I have a button comprised of an icon and some text. When the button is hovered, the text moves to the right, and so does the icon. It creates a nice animation

The problem is I make this transition happen with the following code:

.button:not(.disabled):hover .icon {
  transform: translate3d(150%, 0, 0);
}

The 150% is just an arbitrary value, if you go inside App.js and change the width of the icon (line 10), you can tell that it's no longer centered. I can't wrap my head around a solution that would ensure the following (my goals):

• When the button is not hovered, both the icon and the text should be center.
• When the button is hovered, only the icon should be ultimately centered.

Would appreciate any guidance.