JSFiddle - React, Tailwind, and code Playground

by robertfalken

HTML

<input type="text"/>

JavaScript

input = $("input")

css = {
    fontFamily: input.css("font-family"),
    fontSize: input.css("font-size"),
    letterSpacing: input.css("letter-spacing"),
    fontWeight: input.css("font-weight"),
    whitespace: "nowrap"
};

input.bind("keydown keyup blur focus", function(){
    val = input.val().replace(/\s/g,",")
    tester = $("<span/>").html(val).css(css).hide().appendTo("body");
    w = tester.outerWidth()
    w = Math.max(w,70)
    input.css({width: w+10})
});