JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="circle" />

CSS

input {
    border-radius: 50%;
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

JavaScript

$('#circle').on('input', function () {
    var textLength = $(this).val().length;
    var textWidth = parseInt($('#circle').css('font-size'), 10) * textLength + 'px';
    $('#circle').css('width', textWidth);
    $('#circle').css('height', textWidth);
});