JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>


<input class="searchy-search input1" />
<input class="searchy-search input2" />
<p>who has focus?</p>
<div class="focus-who jquery-focus"></div>

<button class="out-focus">toggle focus out</button>

CSS

.focus-who {
    width: 100px;
    height: 30px;
    border: 1px solid;
}

JavaScript

$(document).ready(function() {
    $('.focus-who').html('init');
    $('.input1').val('some long string of text');
    $('.input2').val('some long string of text');
    
    $('.searchy-search').focusin(function() { 
        var $shrinkSelector;
        if($(this).hasClass('input1')) {
            $shrinkSelector = $('.input2');
        } else if($(this).hasClass('input2')) {
            $shrinkSelector = $('.input1');
        }   
        var initWidth = 100;
        var inputVal = $(this).val();
        var inputLength = inputVal.length;
        
        if(inputLength > 16) {
            var offset = ((inputLength - 16) * 6); 
            var growWidth = initWidth + offset;
            var shrinkWidth = initWidth - offset;
            var aniTime = 200;
            $(this).animate({width: growWidth + 'px'}, aniTime);
            $shrinkSelector.animate({width: shrinkWidth + 'px'}, aniTime);
        }  
    });
    var outFocus = false;
    $('.out-focus').click(function() {
        outFocus = !outFocus;
    });
    $('.searchy-search').focusout(function() {
        if(outFocus) {
            $('.searchy-search').animate({width: '130px'}, 200);
        }
    });
});