JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="search">
    <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i>Search</button>
</div>

CSS

.search {
    padding: 5px 0;
    width: 50px;
    height: 10px;
    position: relative;
    left: 10px;
    float: left;
    line-height: 22px;
}

    .search input {
        position: absolute;
        width: 0px;
        float: Left;
        margin-left: 20px;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        height: 20px;
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius:1px;
        top: 15px;

    }

        .search:hover input, .search input:focus {
            width: 100px;
            margin-left: 0px;
            z-index: 1000;
        }

.btn {
    height: 20px;
    position: absolute;
    padding-top:0;
    right: 0;
    top: 15px;
    border-radius:1px;
    z-index: 1001;

}