JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" size="7" name="client_nationality" value="" id="client_nationality" class="text_font_resize">

CSS

.text_font_resize
{
    float: left; 
    border-width: medium medium 1px; 
    border-style: none none solid; 
    border-color: -moz-use-text-color -moz-use-text-color rgb(204, 204, 204); 
    -moz-border-top-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none;
    border-image: none; 
    padding: 0px 8px; 
    font: 700 12px verdana;
    text-transform: uppercase; 
    vertical-align: baseline; 
    margin: 0px 5px 0px 0px;
}

JavaScript

$('.text_font_resize').keyup(function(ev){
    if($(this).val().length > 7)
    {
        var size =  $(this).css("font-size");
        size = size.slice(0,-2)
        size -= 0.9;
        if(size >= 8)
        {
            $(this).css("font-size",size + "px");
        }
    }
    if($(this).val().length === 0)
    {
        $(this).css("font-size","12px");
    }
});