JSFiddle - React, Tailwind, and code Playground

HTML

<form class='header-search-form' id='student-search' action='JavaScript:postSearchForm()' method='POST' autocomplete='off'>
    <input class='header-search-box' type='text' id='search-string' name='search-string'>
    <img src='    http://findicons.com/files/icons/974/glyphish/18/magnifying_glass.png' class='magnifying-glass' />

CSS

.header-search-box {
    display:none;
}
.header-search-box {
    width: 0px;
}
.magnifying-glass {
}

JavaScript

$(function () {
    var mglass = $('.magnifying-glass');
    var form = $('.header-search-box');
    mglass.click(function () {
        if (form.is(':hidden')) form.show()
        form.animate({
            'width': form.width() == 100 ? '0px' : '100px'
        }, 'slow', function () {
            if (form.width() == 0) form.hide()
        });
    });
});