JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="meter">
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<input type="text" id="test" class="dimensions" value="Click in and type">
<div id="faux" class="dimensions">
Click in and type
</div>
<div>
    <em id="pos">unknown</em> pixels from left.
</div>

CSS

body {
    font-family: Calibri, sans-serif;
    font-size: 11pt;
    line-height: 1.3em;
    padding: 20px;
}
em { font-style: italic; }
ul.meter {
    list-style: none;
}
ul.meter li {
    display: inline-block;
    width: 9px;
    height: 10px;
    border-left: 1px solid #c00;
}
.dimensions {
    margin: 0;
    border: 1px solid #ccc;
    padding: .25em .5em;
    font-family: Consolas, monospace;
    font-size: 10pt;
    display: inline;
}
#faux {
    xvisibility: hidden;
    margin-right: 0;
    border-right: 0;
    padding-right: 0;
}

JavaScript

var faux = $("#faux");
var pos = $("#pos");
$("#test").on("keyup click focus", function(evt) {
    var off = this.selectionStart;
    faux.text($(this).val().substring(0, off).replace(/\s/g, "\u00a0"));
    pos.text(faux.outerWidth());
});