JSFiddle - React, Tailwind, and code Playground

HTML

<input id="textinput" type="text" style="width: 200px; border: 1px solid black; padding: 0;" />

JavaScript

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

$('#textinput').on('keyup', validatetext);

function validatetext(e) {
    var w = parseInt(e.target.value.width());
    if (w > 100) {
        console.log("Width Gt 100px ["+w+"px] Char Count ["+e.target.value.length+"]");
        do {
            e.target.value = e.target.value.slice(0,-1);
        } while (parseInt(e.target.value.width()) > 100)
    } else {
        console.log("Keep going! ["+w+"px] Char Count ["+e.target.value.length+"]");
    }
}