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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}
:root {
  --size: 50px;
  --radius: 100px;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(45deg,#4e65ff,#92effd);
}
.search {
  background-color: #fff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  filter: drop-shadow(0px 0px 5px #6a6a6a75);
}

input {
  color: #777;
  background: transparent;
  border: none;
  font-size: calc(var(--size) / 2.5);
  width: 0;
  height: var(--size);
  transition: 0.75s width;
  transform-origin: right center;
  text-indent: 20px;
}

button {
  cursor: pointer;
  color: #3880ff;
  width: var(--size);
  height: var(--size);
  border: none;
  font-size: calc(var(--size) / 3);
  background-color: transparent;
  border-radius: 50%;
}
::placeholder {
  color: #555555c7;
  text-transform: lowercase;
}
.expand {
  width: calc(var(--size) * 7);
}

let search = document.querySelector(".search");
let searchInput = document.querySelector(".search input");

search.addEventListener("click", (event) => {
  if (!searchInput.classList.contains("expand")) {
    searchInput.classList.add("expand");
    searchInput.value = "";
    searchInput.focus();
  }
});

searchInput.addEventListener("blur", (event) => {
  console.log(event.target);
  if (searchInput.classList.contains("expand")) {
    searchInput.classList.remove("expand");
  }
});