Problem with the size after change the price of a product

I was working in this super simple project get really satisfied with the finish work but then CHAN! When I check the functionality of the app I noticed that the firs card, the one of the basic services get’s bigger when the number change and also the third division line of the card change his size acting by himself when all the division lines are made it at once. I was using SASS for this project but I don’t think that was the problem in the compilation.
also testing the website with my phone I noticed that the events like the transition’s doesn’t work.
any reason?
here is the project in a codepen https://codepen.io/alandittler/pen/VwjwLrK

From what it looks like, only the first card is changing size, and that is slightly relocating the other two. What’s happening is the font size difference between the numbers 1 and 4 is causing the first box to change size.

You only set the margin to the bottom of the card, not any other side, including the left and right sides. Margin: auto is currently being applied to all sides of the card except the bottom.

Some possible fixes include to add dedicated margin sizes to regulate the size of the cards, pick another number instead of 1 that shares the same font “size” as the number 4, or use a monospace font for the main numbers.