• HTML
• CSS
• JS

HTML

<!-- Iconsout Link for Icons -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">

<div class="wrapper">
    <form action="#">
        <input type="text" placeholder="username" maxlength="16" required>
        <i class="uis uis-at"></i>
        <span class="counter">16</span>
    </form>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:linear-gradient(to top,#56e2d7 0%,#58cff1 100%);
}
.wrapper{
    background:#fff;
    padding:20px;
    width:450px;
    border-radius:5px;
}
.wrapper form{
    height:50px;
    width:100%;
    display:flex;
    position:relative;
    align-items:center;
    justify-content:space-between;
}
form i{
    position:absolute;
    width:55px;
    text-align:center;
    font-size:23px;
    color:#c4c4c4;
    pointer-events:none;
}
form input:valid ~ i{
    color:#58cff1;
}
form input{
    height:100%;
    width:100%;
    border:2px solid #ddd;
    border-radius:5px;
    padding:0 50px 0 45px;
    font-size:20px;
    outline:none;
    transition:all 0.1s ease;
}
form input:focus,
form input:valid{
    border-color:#58cff1;
}
form input::placeholder{
    color:#c4c4c4;
}
form .counter{
    position:absolute;
    right:3px;
    width:55px;
    text-align:center;
    font-size:20px;
    color:#c4c4c4;
    border-left:1px solid #d8d8d8;
    pointer-events:none;
}
form input:valid ~ .counter{
    color:#58cff1;
    border-color:#58cff1;
}

JS

const input = document.querySelector("form input"),
counter = document.querySelector("form .counter"),
maxLength = input.getAttribute("maxlength");

input.onkeyup = ()=>{
    counter.innerText = maxLength - input.value.length;
}

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