JSFiddle - React, Tailwind, and code Playground

HTML

<div id="recherche">
<form id="formulaire_recherche" method="post" name="f">
    <input id="search-text" type="text" onfocus="if (this.value == 'Rechercher ...') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Rechercher ...'; }" value="Rechercher ..." />
    <input id="search-button" type="submit" value="Go" name="Submit" />
</form>
</div>

CSS

#recherche
{
    margin:10px auto 35px;
    padding:0;  
    width:1024px;
    text-align:center;
}

#formulaire_recherche
{
    position: relative;
    width:96px;
    margin:0 auto;
    padding:0;
    background-color:#999;  
    border-radius:2em;  
    height:52px;
}

#search-text
{
    width:380px; height: 32px;
    background-color:#999;  
    margin: 10px 16px;
    padding: 0 12px;
    color:#FFF;
    float: left;
    border:none;
    font-size:13px;
    font-family:Arial;
    display:none;
}

#search-button
{
    position: absolute;
    background-color:#CCC;
    border:none;
    width:90px;
    height:46px;
    top: 0; bottom: 0; right: 0;
    border-radius:2em;
    margin:3px;
    padding:0;
    color:#FFF;
    font-family:Arial;
    font-weight:700;
    cursor:pointer;
}

JavaScript

$("#formulaire_recherche").mouseover(function(){
    $(this).animate({width:"500"});
    $("#search-text").fadeIn(250);
}).mouseleave(function() {
    $("#search-text").hide();
    $(this).animate({width:"96"});

});