title: Use just part of the input field with CSS
body: <p>I have an input field, and inside it on the right side there is a string that displays information to the user.</p>
  
  <pre><code>&lt;div class="my_div_class"&gt;
      &lt;input class="my_input_class" type="text" placeholder="Search"&gt;
      &lt;span class="my_span_class"&gt;6000 available&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using position relative and absolute, I places the span inside the input field. </p>
  
  <p>However, if the user types a long query, the text will be under the span text.</p>
  
  <p>Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?</p>