<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
  });
});