<div class="container">
	<h1>Minimalist Search Bar</h1>
	<input type="text" value="" placeholder="Enter your search here..." id="searchBar">
	<button><i class="fas fa-search"></i></button>
</div>

body {
	background: green;
}

.container {
	width: 90%;
	margin: 0 auto;
}

h1 {
	color: white;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 48pt;
	margin-top: 100px;
	clear: right;
}

input {
	margin: 50px 0;
	background: none;
	border-bottom: 1px solid white;
	border-top: none;
	border-left: none;
	border-right: none;
	width: 200px;
	height: 30px;
}

input:focus {
	outline: none;
	border-bottom: 3px solid white;
	color: white;
}

::-webkit-input-placeholder {
	color: white;
	font-weight: bold;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: white;
	font-weight: bold;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: white;
	font-weight: bold;
}

:-ms-input-placeholder {
	color: white;
	font-weight: bold;
}

button {
	width: 50px;
	height: 50px;
	background: none;
	border: none;
	position: absolute;
	top: 200px;
	left: 275px;
}

button:focus {
	outline: none;
}

.fas {
	color: white;
	font-size: 2em;
}

$("button").click(function(event){
	event.preventDefault()
	$("input").animate({
		width: 'toggle'
	}, 150, function() {
		// animation complete
	});
});