*{
    box-sizing: border-box;
}
body{
    display:flex;
    align-items:center;
    justify-content: center;
    margin:0;
    width:100%;
    height:100vh;
    background:#66696413;
}

.search{
    height:50px;
    position:relative;

}

.input{
    background:white;
    width:50px;
    height:50px;
    outline: none;
    transition:width 0.3s ease-in-out;
    -webkit-transition:width 0.3s ease-in-out;
    -moz-transition:width 0.3s ease-in-out;
    -ms-transition:width 0.3s ease-in-out;
    -o-transition:width 0.3s ease-in-out;
    position:relative;
    border:none;
    outline:none;
    box-shadow:0px 0px 10px 0px #ddd;
    padding:20px;
}
.btn{
    position:absolute;
    width:50px;
    height:50px;
    background:white;
    outline:none;
    border:none;
    box-shadow:0px 0px 10px 0px #ddd;
    transition:transform 0.3s ease-in-out;
    -webkit-transition:transform 0.3s ease-in-out;
    -moz-transition:transform 0.3s ease-in-out;
    -ms-transition:transform 0.3s ease-in-out;
    -o-transition:transform 0.3s ease-in-out;
    cursor:pointer;
    top:0px;
    left:0px;
}
    .btn.material-icons{
    color:black;
    font-size:30px;
}
.search.active .input{
    width:200px;
}
.search.active .btn{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
    -ms-transform:translateX(100px);
    -o-transform:translateX(100px);
    left:100px;
}