JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search">
<img src="https://cdn0.iconfinder.com/data/icons/strabo/24/magnifying_glass.png" class="trigger"/> 
    <div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''"/>           
</div>
</div>

CSS

.search-bar{ width: 0;overflow:hidden; }
.trigger{cursor:pointer;}

JavaScript

$(document).ready(function() {
    $('#search .trigger').click(function(){
        $('.search-bar').animate({width: 200},1500);
    });
});