<div class="search">
  <form id="searchFormTop" action="" method="get">

    <input type="text" class="searchbox" name="q" id="q" placeholder="Search...">
    <span class="search-btn-wrap">
    <button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
      </span>
  </form>
</div>

.search{
  position: relative;
  
}
.searchbox:focus{
  border-color: #66afe9;
  outline: 0;
  width: 200px;
  -webkit-transition: width 0.2s ease-in 0.2s;
          transition: width 0.2s ease-in 0.2s;
}
.searchbox{
  -webkit-transition: width 0.2s ease-in 0.2s;
          transition: width 0.2s ease-in 0.2s;
  position: relative;
  width: 150px;
  height: 30px;
  float: right;
  margin:0;
  padding: 0 35px 0 20px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  background-image: none;
  color: #555;
}
.search-btn-wrap{

  position: absolute;
  right: 0;
}

.search-btn{
  cursor: pointer;
  font-size: 16px;
  margin-top: 2px;
  margin-right: 2px;
  z-index: 3;
  height: 26px;
  width: 30px;
  border: 0;
  margin-bottom: 0;
  color: #CCC;
  background: transparent;
}