JSFiddle - React, Tailwind, and code Playground

HTML

<div class="serch">
<input type="text" name="serch" value=" " placeholder="...جستجو"style="display:none;color:#666666;border-radius:5px;
 -webkit-box-shadow:0px 0px 2px #bababa, inset 2px 2px 2px #303030; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 2px 2px 2px #303030;  
 box-shadow:0px 0px 2px #bababa, inset 2px 2px 2px #303030; 
            margin-top:5px;  text-align:right;border:none; height:25px;      outline: none; position:inherit;" >
</div>

CSS

.serch{
    width: 35px;
    height: 35px;
    background: red;
    -webkit-transition: width 2s;
    -webkit-transition-timing-function: linear;
    transition: width 2s;
    border:#000000 dashed 1px;
    position:absolute;
    padding : 5px;
}

JavaScript

$(".serch").on('hover',function(){
    $(this).css('width','230px');
    setTimeout(function(){$("input").fadeIn('fast')}, 1500);
});