Expand input with :focus

HTML

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

CSS

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
    display: none;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

JavaScript

$('.icon').click(function() {
	$('.search').toggle();
});