• HTML
• CSS
• JS

HTML

<div class="searchBox">
    <div class="search"><ion-icon name="search-outline"></ion-icon></div>
    <div class="searchInput">
        <input type="text" placeholder="Search Here">
    </div>
    <div class="close"><ion-icon name="close-outline"></ion-icon></div>
</div>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Ubuntu',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:linear-gradient(45deg,#4e65ff,#92effd);
}
.searchBox
{
    position:relative;
    width:60px;
    height:60px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    transition:0.5s;
    overflow:hidden;
    box-shadow:0 25px 35px rgba(0,0,0,0.1);
}
.searchBox.active
{
    width:360px;
}
.searchBox .search
{
    position:relative;
    min-width:60px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    cursor:pointer;
}
.searchBox .close
{
    position:relative;
    width:60px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.25em;
    scale:0;
    transition:0.5s;

}
.searchBox.active .close
{
    scale:1;
    transition-delay:0.5s;
}
.searchBox .searchInput
{
    position:absolute;
    left:60px;
    width:calc(100% - 120px);
    height:100%;
    line-height:60px;
}
.searchBox .searchInput input
{
    position:absolute;
    width:100%;
    height:100%;
    border:none;
    outline:none;
    font-size:1.25em;
}

JS

let search = document.querySelector('.search');
let close = document.querySelector('.close');
let searchBox = document.querySelector('.searchBox');

search.onclick = function(){
    searchBox.classList.add('active');    
}
close.onclick = function(){
    searchBox.classList.remove('active');    
}

// All the credits: https://www.youtube.com/watch?v=WL9XtJtlimw