<div class="search-bar form-group">
  <div class="inner-div">
    <input placeholder="Search" id="search" type="text">
    <button class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span>        
    </button>    
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,900");

body {
  font-family: "Roboto";
  font-weight: 300;
  font-size: 3rem;
  line-height: 2;
  background-color: #F5F5F5;
}
.search-bar{
  background-color: #E6791B;
  padding: 4rem;
  width: 100%
}

.inner-div {
  display: flex;
}
.btn-default {
  height: 4rem;
  background-color: #E3E3E3;
  padding: none;
  border: none;
  border-radius: 0;
  transition: .8s;
}
.btn-default:hover {
  background-color: #B6B6B6;
  transition: .8s;
}
#search {
  height: 4rem;
  width: 30rem;
  border: none;
  border-radius: 0;
  padding: 10px;
  transition: .8s;
  
}
#search:focus {
  width: 100% !important;
}

.large {
  height: 90px !important;
  min-width: 10rem;
  font-size: 6rem !important; 
  padding: 10px 10px 0px 10px; 
  transition: .8s;
}

$("#search").focus(function(){
  $("#search").toggleClass("large");
  $(".btn-default").toggleClass("large");
});
$("#search").focusout(function(){
  $("#search").toggleClass("large");
  $(".btn-default").toggleClass("large");
});