*{
  box-sizing: border-box;
}

body{
  background-image:linear-gradient(90deg, #7d5fff, #7158e2) ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0%;
}

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

.search .input{
background-color: #fff;
border: 0;
font-size: 18px;
padding:15px;
height: 50px;
width: 50px;
transition: width 0.3s ease;
}

.btn{
background-color: aliceblue;
border:0;
cursor: pointer;
font-size: 24px;
position: absolute;
top:0;
left:0;
height: 50px;
width: 50px;
transition:transform 0.3s ;
}

.btn:focus 
.input:focus{
  outline: none;
} 

.search.active .input{
width: 200px;

}

.search.active .btn{
  transform:translateX(198px);
}