how to prevent text inside an input from being overridden - html

Question

I'm trying to implement an html control similar to the how search works in google chrome. I'm aware that in chrome it might not be built in html, but I'm trying to achieve the same functionality.
The way the search works is that adjacent to the text entered into the input, there's an extra text field that present the current index of a total number. It's also worth while noticing that the highlighted border is of the entire input (including the entered text and the index and sub total count). Also, when entering a long text, the index and sub total indicator (e.g. 0 of 10) doesn't get overridden, and the text itself scrolls.
Does anyone have any simple approach for implementing this feature set?

Answer 1

A simple aproach would be adding padding to the input, and positioning the text you want to keep over it. Rewriting the value of the input with pogramming.
HTML
<div class="form-text">
<input type=text placeholder="0 of 0" id="youridhere"/>
<label for="youridhere" class="static-value">Get this label to appear</label>
</div>
CSS
.form-text{
position:relative;
}
input{
padding:5px 5px 5px 150px;
}
.static-value{
position:absolute;
left:10px;
font-size:0.85em;
top:9px;
}
Pen of it working
This is the simplest solution, but you can find other better results and best practices using javascript. Wich I think would be something like detecting the pressed key and adding it the to string programatically instead of the standart browser behaviour.
I like this CSS based solution cause you can customize the fixed text, and don't need to change the standart behaviour of input fields.
-------- Edit --------
Actually, the best solution would be with the label element, with the for attribute, link it to the field. So when clicked it leads the user to the field. Edited.

Answer 2

I've made the foundation of it with only CSS, see the demo follows.
jsfiddle
* {
box-sizing: border-box;
}
div {
position: relative;
width: 10em;
}
input {
width: 100%;
padding: 4px;
border: 1px solid;
padding-right: 52px;
}
span {
display: block;
border-left: 1px solid;
width: 50px;
text-align: center;
position: absolute;
right: 0;
top: 2px;
}
<div><input type="text"><span>etc</span></div>