JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg" alt="image of laminates"> 
			<div class="location-search-container">
				<div class="input-group custom-search-form">
				  	<input type="text" class="form-control">
				  	<span class="input-group-btn">
					  	<button class="btn btn-default" type="button">
					  			<span class="glyphicon glyphicon-search"></span>
					 	</button>
					 </span>
				 </div><!-- /input-group -->	
			</div>

</header>

CSS

header {
	position: relative;
	/*height: 300px;
	background: yellow;*/
}

header img{
	display: block;
	width: 100%;
}

.location-search-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: table;
	height: 100%;
}

.input-group {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
}