JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search">
    <form class="form-inline" id="forminline"role="form">
        <div class="input-group">
            <span class="input-group-btn" id="btn-search">
                <div class="btn btn-search"><i class="fa fa-search search-ico">S</i></div>
            </span>
            <label class="sr-only" for="exampleInputEmail2"></label>
            <input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
        </div>
    </form>
</div>

CSS

.search { width:300px; }

.input-group { position:relative; float:right; }

#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }

input { width:0; padding-left:20px; border:1px solid transparent; }

JavaScript

$('#btn-search').click(function(){
    $('input').css('border-color', '#aaa').animate({
        'width' : 200
    }, 300).focus().queue(function(){
			$(this).addClass('toggled'); 
			$(this).dequeue();
		});
});

// Once opened, check to see if the user isn't hovered or clicking the text field, and then don't do anything like close it
$('input').hover(
  function() {
    $(this).removeClass('unhovered');
  }, function() {
    $(this).addClass('unhovered');
  }
);

// If the user is not hovered over the open text field, and they click, go ahead and close it
$(document).click(function(){
	if($('input').hasClass('toggled') && $('input').hasClass('unhovered')) {
		$('input').animate({
				'width' : 0
		}, 300).css('border-color', 'transparent').queue(function(){
			$(this).removeClass('toggled'); 
			$(this).dequeue();
		});;  
	}
});