JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div>2ND EXAMPLE, DESIRED EFFECT</div>
<button type="submit" class="btn"  id="searchsubmit_2"><i class="fa fa-search"></i></button>
<input type="search" id="s_2" name="s" value="" />js

CSS

body {
    text-align:right;
    margin-top:40px;
}

#s, #s_2 {
    border:none;
    border-bottom:1px solid black;
    background-color: white;
    color: #D3D3D3;
    line-height: 12px;
    font-style: italic;
    margin-left: 5px;
    margin-right: 5px;
    width: 140px;
    display:none;
}

#searchsubmit, #searchsubmit_2 {
    background-color: transparent;
    color: black;
    border: medium none;
    cursor: pointer;
    font-size: 16px;
    margin-right: -5px;
}

JavaScript

$( "#searchsubmit_2" ).one( "mouseenter", function() {
    $("#s_2").animate({width: 'toggle'}, "xslow");
});