<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<form method="get" id="searchform" action="#" class="clearfix">
<div>
    <input type="text" value="" id="keyword" />
    <input type="submit" id="submit" value="&#xf002;" />
</div>
</form>

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
    content:"";
    clear:both;
    display:block;
}

#searchform { 
  margin:0 auto;
  width:300px;
  position:relative;
}

#keyword,
#submit {
  border:none;
  padding:10px;
  position:absolute;
}

#keyword {
  border-radius:10px 0 0 10px;
  background:#dfdfdf;
  right:20%;
  transition:all 0.3s;
  width:20%;
}

#keyword:focus {
  width:80%;
}

#submit {
  border-radius:0 10px 10px 0;
  background:#0E7AC4;
  color:#fff;
  font-family:FontAwesome;
  right:0;
  width:20%;
}