Can't justify text after adding new break line in Woocommerce price using CSS

I hope you are doing well, I’m facing a problem in mobile devices with the font price size, so I decided to use CSS to make a new line using this code

del.amount { display: flex !important;  flex-direction: column !important; }

but as shown in this image:

it does not appear as the discount price in the same vertical line, I don’t know why, even I was trying a couple of CSS methods still showing the same as in screenshot attached in the link.

Has anyone know how to fix this, I am using Woodmart theme.

This problem occurs only in mobile devices.