Nice expanding search bar without JavaScript and with Bootstrap and button

This is a simple expanding search bar without JavaScript and minimal code. This search bar will not bump other elements out of place either. Easily expands to the left or to the right. I have added comments to help walk you through where all of the things you probably care about are happening. This includes a button attached to the search bar and less styles than my other fiddle as it's using bootstrap's form-control styling now.

by Max Poshusta

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="parent">      
    <div>
        Some other element that shouldn't move.
    </div>
    
    <div class="search-container">
        <div class="input-group">
            <input class="form-control searchBar" placeholder="Search" />
            <a class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </a>
        </div>
    </div>
</div>

<div class="bootstrap-version">
    See my non-bootstrap version of this same search bar by <a       href="https://jsfiddle.net/maxshuty/4mshemh2/" target="_blank">clicking here</a>.
</div>

CSS

/*CSS for this fiddle only, you probably don't want this.*/
body {
  padding: 3em;
  font-family: Arial, Helvetica, sans-serif;
}

.search-container {
  margin-top: -0.67em;
}

.bootstrap-version {
  margin-top: 3em;
}
/*End fiddle only styles.*/


/*CSS to make the search bar not bump other elements out of place.*/
.parent {
  position: relative;
}

.parent > div {
  display: inline-block;
}

.search-container {
    z-index: 9999;
    position: absolute;
/*If you want the search bar to expand to the right then..*/
/*..then just set this to left instead.*/
    right: 1em;
}
/*End CSS to prevent other elements from moving.*/


/*Expanding search CSS*/
.searchBar {
  position: relative;
	outline: none;
	-webkit-appearance: textfield;
	font-family: inherit;
	width: 125px !important; /*The initial width before it expands.*/
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
  float: right;
}

.searchBar:focus {
	width: 475px !important; /*The width it will exand to on focus*/
	background-color: #fff;
	border-color: #b01e21;	
	-webkit-box-shadow: 0 0 5px #b01e21;
	-moz-box-shadow: 0 0 5px #b01e21;
	box-shadow: 0 0 5px #b01e21;
}
/*End expanding search CSS.*/