JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <form class="form-horizontal">
      <div class="form-input-group">
        <spam>Something</spam>
        <input type="search" placeholder="search" ng-blur="false" ng-focus="true" ng-class="{ myFocus: true, myBlur: false }">
        <button class="btn btn-default" type="button">
          <i class="glyphicon glyphicon-search"></i>
        </button>
      </div>
    </form>

CSS

form div {
    margin: 0 auto;
    text-align: right;
    width: 250px;
}
div * {
    transition: all 500ms ease 0s;
}


.form-horizontal input {
    width: 0px;
    margin-right: -20px;
}
.form-horizontal.open input {
    width:150px;
    margin-right: 0;
}

JavaScript

$( ".btn" ).click(function() {
  $( ".form-horizontal" ).toggleClass( "open" );
});