Question: I'm creating a custom input selector. It uses a text input to display the selection and a button for a user to make selection. It's similar to the snippet below:

```js
inputDisplay = document.getElementById("inputDisp");
choosePath = () => {
 const newpath = prompt("Enter new long path", "a/long/long/long/long/long/verylong/long/long/long/long/long/long/verylong/long/path/to/folder/");
 inputDisplay.value = newpath;
}

document.getElementById("btnSel").addEventListener("click", choosePath
);
```

```css
input {
  width:100%;
}
@media screen and (max-width: 640px){
  input{
  text-align:right;
  }
}
```

```html
<input id="inputDisp" readonly value="a/path/to/a/folder/">
<button id="btnSel">Select path</button>
```

What I want is that as the user resizes the screen, it will align the text to the right if theres not enough space left to display the whole path. I thought I could use media queries, but if you input a short path and it aligns right, it does not look so good. 

Is there a way I could align the contents of the input box to the right only when the text is too long for the textbox?

Answer: 
As far as I know not with pure css, with javascript you could hook onto several events and check the input string length against the input element width and align the latter's content to the right if the string is longer than its length. (window resize, input change)
You can use `direction rtl/ltr` to solve this problem:

```js
inputDisplay = document.getElementById("inputDisp");
choosePath = () => {
 const newpath = prompt("Enter new long path", "a/long/long/long/long/long/verylong/long/long/long/long/long/long/verylong/long/path/to/folder/");
 inputDisplay.value = newpath;
}

document.getElementById("btnSel").addEventListener("click", choosePath
);
```

```css
input {
  direction: ltr;
}
@media screen and (max-width: 640px){
  input{
    direction: rtl;
  }
}
```

```html
<input id="inputDisp" readonly value="a/path/to/a/folder/">
<button id="btnSel">Select path</button>
```