JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<form class="navbar-form" role="search">
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search"> <span class="input-group-addon">
                      <i class="fa fa-search fa-1x"></i>
            </span> 
        </div>
    </div>
</form>

SCSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.navbar-form {
    padding-left: 55px;
    .input-group {
        width: 200px;
        &:hover {
            .input-group-addon i {
                opacity: 1;
            }
        }
        .form-control {
            border-right: none;
            width: 350px;
        }
        .input-group-addon {
            background-color: white;
            border-left: none;
            i {
                opacity: 0.7;
            }
        }
    }
}