JSFiddle - React, Tailwind, and code Playground

HTML

<label for="ltr">ltr <input id="ltr" value="*#abcdefghijklmnopqrstuv" /></label>

<label for="rtl">rtl <br/><input id="rtl" value="*#abcdefghijklmnopqrstuv" /></label>

CSS

input {
  width: 200px;
  font-size: 30px;
}
label {
  display:inline-block;
  width:200px;
  overflow:hidden;
}
#rtl {
float:right;
text-align:right;
width:900px;
margin-left:-900px;
}