<div class="container">
  <input type="text" class="input" placeholder="Search..">
  <button class="btn">
    <i class="fas fa-search"></i>
  </button>
</div>

<script src="https://kit.fontawesome.com/2862d86d51.js" crossorigin="anonymous"></script>  <!-- Importing Font Awesome -->

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eacda3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #d6ae7b, #eacda3);  /* Chrome 10-25,   Safari 5.1-6 */
  background: linear-gradient(to right, #d6ae7b, #eacda3); /* W3C, IE 10+/ Edge,       Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container{
  position: relative;
  height: 3rem;
}

.input{
  height: 3rem;
  width: 3rem;
  border: 0;
  padding: 0.5rem;
  font-size: 1rem;
  transition: width 0.5s; 
}

.btn{
  border: 0;
  height: 3rem;
  width: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.btn:focus, .input:focus{
  outline: 0;
}

/*When the container div has a class of active, we change the width of input to 10rem*/
.container.active .input{
  width: 10rem;
}

/*When the container div has a class of active, we translate the search button by 7rem on the x axis*/
.container.active .btn{
  transform: translateX(7rem);
}

const button = document.querySelector('.btn');
const input = document.querySelector('.input');
const container = document.querySelector('.container');

//To detect a click on the search button and expand the Search bar
button.addEventListener('click', function(){
  container.classList.add("active");
  input.focus();
});

//To detect mouse click outside the search bar and shrink the search bar
document.addEventListener('click', function(event){
  if (event.target.closest('.container')) return
  container.classList.remove("active");
})