Overflow-x position on right

Question

I have one paragraph p where I need to display some data.

I set white-space:nowrap and text-align:right . When someone types some content in one text field, this content shows in the paragraph from right to left.

But when data comes to left scroll-x was set to left , and to see new typed content you need to scroll to right.

I need the reverse, showing new content and scroll if you want to see the old one.

If i use direction: rtl, it works fine, but only for word, not with number, so i need another solution. Ofc i have an idea to do this with javascript, but i want solution without it.

 document.querySelector('#inpt').addEventListener('keydown', function(e) { document.querySelector('#display').innerHTML = e.target.value })

 p { width: 100%; white-space: nowrap; text-align: right; overflow-x: scroll; }

 <input id="inpt" type="text"> <p id='display'> </p>

Answer 1

Setting display: flex with a flex-direction of row-reverse on your p tag seems to do the trick:

 document.querySelector('#inpt').addEventListener('keydown', function(e) { document.querySelector('#display').innerHTML = e.target.value })

 p { display: flex; flex-direction: row-reverse; width: 100%; white-space: nowrap; text-align: right; overflow-x: scroll; }

 <input id="inpt" type="text"> <p id='display'> </p>