JSFiddle - React, Tailwind, and code Playground

HTML

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
      <input type="text" class="search_form" placeholder="Search" />
  </div>
    <button type="submit" class="btn btn-default" > 'Find'</button>
</form>

CSS

input[type=text].search_form
{
	width:200px;
	min-height: 28px;
	padding: 4px 20px 4px 8px;
	font-size: 12px;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

input[type=text]:focus.search_form
{
	width: 400px;
}