JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<input type="text" class="input">
<div class="input-buffer"></div>

CSS

.input,
.input-buffer{
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.input{
    width: 100px;
    min-width: 100px;
}

.input-buffer{
    position: absolute;
    top: -1000px;
    left: -1000px;
    visibility: hidden;
    white-space: nowrap;
}

JavaScript

var $input = $('.input'),
    $buffer = $('.input-buffer');

$input.on('input', function() {
    $buffer.text($input.val());
    $input.width($buffer.width());
});