JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<input type="text" id="txt" placeholder="Search" />
<button id="btn">Special Button</button>

</div>

CSS

#main {
  display:flex;
  position:relative;
}

#txt {
  width:125px;
  position:absolute;
  z-index:2;
}
#btn {
  margin-left:140px;
  position:absolute;
  z-index:1;
}

@keyframes widen {
  0% {
    width:125px;
  }
  100% {
    width:300px;
  }
}


.openSearch {
  -webkit-transition: widen .5s ease-in;
    -moz-transition: widen .5s ease-in;
    -o-transition: widen .5s ease-in;
    animation: widen .5s ease-in;
}

JavaScript

const search = document.getElementById("txt");

search.addEventListener("focus", event => {
	search.classList.add("openSearch");
});