• HTML
• CSS

HTML

<div class="box">
    <input type="checkbox" id="check">
    <div class="search-box">
        <input type="text" placeholder="Type here...">
        <label for="check" class="icon">
            <i class="icon-search"></i>
        </label>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    height:100vh;
    width:100%;
    background:#FF676D;
    display:flex;
    align-items:center;
    justify-content:center;
}
.box{
    max-width:400px;
    width:100%;
}
.box .search-box{
    position:relative;
    height:50px;
    max-width:50px;
    margin:auto;
    box-shadow:0 5px 10px rgba(0,0,0,0.25);
    border-radius:25px;
    transition:all 0.3s ease;
}
#check:checked ~ .search-box{
    max-width:380px;
}
.search-box input{
    position:absolute;
    height:100%;
    width:100%;
    border-radius:25px;
    background:#fff;
    outline:none;
    border:none;
    padding-left:20px;
    font-size:18px;
}
.search-box .icon{
    position:absolute;
    right:-2px;
    top:0;
    width:50px;
    background:#fff;
    height:100%;
    text-align:center;
    line-height:50px;
    color:#FF676D;
    font-size:20px;
    border-radius:25px;
    cursor:pointer;
}
#check:checked ~ .search-box .icon{
    background:#FF676D;
    color:#fff;
    width:60px;
    border-radius:0 25px 25px 0;
}
#check{
    display:none;
}


/*
    Fuente: https://www.youtube.com/watch?v=40BXTSg_cPI
    - Todos los créditos a su autor
    - Nota : Se utilizó los iconos de fontello. 
*/