JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" value="Foghorn Leghorn Foghorn Leghorn" /><br />
  Last name: <input type="text" name="lname" value="" /><br />
    Last name: <input type="text" name="lname" value="Foghorn Leghorn Foghorn Leghorn" disabled /><br />
      <input type="submit" value="Submit form" style=""/>
</form>

</body>
</html>

CSS

input{
margin:10px;
}

JavaScript

$('input[type!="submit"]').focus(function(){
    if ($(this).val().length > 20) {
    $(this).attr('data-default', $(this).width());
    $(this).animate({width: 300}, 'slow');
    $(this).parent().addClass('cooling');
    }
    }).blur(function(){ /* lookup the original width */
    var w = $(this).attr('data-default');
    $(this).animate({
    width: w
    }, 'slow');
    $(this).parent().removeClass('cooling');
    });