JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="hol">
    <div class="ico">FIND It [+]</div>
    <div class="paner">
        <input class="texter">
    </div>
</div>

CSS

.hol {
    padding:5px 0 5px 2px;
    font-family:Arial;
    font-size:11px;
    display:table;
    background:#dfdfdf;
    border:1px solid #999999;
    color:#787878;
}
.hol div {
    float:left;
}
.ico {
    padding:0 5px 0 10px;
}
.paner {
     padding-right:5px;
}

 * { outline:none; }


.texter {
    border:none;
    width:0;

}

JavaScript

$(".hol").hover(function () {
    $(this).find(".texter").stop().animate({ width : 100 });
},

function () {
    $(this).find(".texter").stop().animate({ width : 0 });
});