JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css">
<div id="foo"> <small>type text</small>

    <form class="main-search-form" role="search" aria-labelledby="main-search-label">
        <div class="input-group">
            <label for="main-search-label" class="sr-only">Rechercher</label>
            <input type="text" placeholder="Rechercher dans le site" class="form-control" id="main-search-input" /> <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit" aria-label="Rechercher"><i class="fa fa-search fa-inverse"></i></button>
            
                        </span>

        </div>
    </form>
</div>
<div id="foo"> <small>type search</small>

    <form class="main-search-form" role="search" aria-labelledby="main-search-label">
        <div class="input-group">
            <label for="main-search-label" class="sr-only">Rechercher</label>
            <input type="search" placeholder="Rechercher dans le site" class="form-control" id="main-search-input" /> <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit" aria-label="Rechercher"><i class="fa fa-search fa-inverse"></i></button>
            
                        </span>

        </div>
    </form>
</div>

CSS

#foo {
    padding:50px;
}