JSFiddle - React, Tailwind, and code Playground

HTML

<i class="fa fa-search"></i> <input type="text" class="form-control-filter input-filter-sm mobile-filter" placeholder="Search">

CSS

.input-filter {width: calc (100% - 25px); width: -webkit-calc(100% - 25px); width: -moz-calc(100% - 25px); }
.input-filter-sm {width: 75px; }

JavaScript

$( "input.mobile-filter" ).focus(function(){
  $( "input.mobile-filter" ).addClass("input-filter")
  $( "input.mobile-filter" ).removeClass("input-filter-sm")
});

$( "input.mobile-filter" ).blur(function(){
   var textLen = $(this).val().length;
    if(textLen === 0) {
      $( "input.mobile-filter" ).removeClass("input-filter")
      $( "input.mobile-filter" ).addClass("input-filter-sm")
    }
});