JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<li id="inputbar"><input type="search" id="search" placeholder="What are you looking for?"></li>
<button id= "searchtoolbar" type="submit" aria-label="Search button"><span class= "glyphicon glyphicon-search" aria-hidden="true"></span></button>

CSS

#inputbar{
		border-color:red;
        list-style:none;
	}
#search{
		background:#007F64;
	display:none; /*It does not work with the transition when I do this.*/
    right: 300px;
		color: white;
		position: absolute;
		border: none;
        top: 18px;
		height: 27px;
		width: 177px;
		padding: 8px 4px;
        margin-right: -220px;
		transition: margin-right;
		transition-duration: .5s;
	}
	#search.searchshow {
		border-color: #41A940 ;
		outline:none;
		margin-right: 0px;
        display:inline-block;  /* The transition does not work if I do so*/
	}

	#searchtoolbar{
		background:#007F64;
		color: white;
		position: absolute;
		right: 260px;
		top: 18px;
		border:none;
		font-size: 18px;
		font-weight: bold;
	}

JavaScript

$(document).on("click", "#searchtoolbar", function(){
	var hasclass = $("#search").hasClass("searchshow");
	if(!hasclass)
	{
		$("#search").addClass("searchshow").focus();
	}
	else {
		$("#search").removeClass("searchshow");
	}
	
});