Hello, I am working on the calculator project using React

I am using the window calculator as sample. On window calculator, numbers, symbols, and operators input from right to left. I want to do the same thing using the “direction: rtl” to make the same thing. However, I am countering a bug when inputting symbols or operators, they are inputting from left to right while numbers are from right to left.

https://codesandbox.io/s/reactcaculator-re5pd

If you input some numbers

then input any operators or symbols,

it would display on the left side

then input a number again would display the operator or symbols on the right side again

For example

First, I input some numbers 12345

12345

then, I input a decimal

.12345

then I input a number again

12345.5

Using “direction: ltr” doesn’t has the problem

Also,

I try to do it in another way, I consider to work on left to right, however, because it is “overflow: hidden”

it would hide the numbers. Is it possible to move the text to the latest input position ?

Thank