Coder Wrap provides free to use snippets

 /**Typeo CSS Start (Note if is not need so remove)**/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #000;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.cw-container {
    max-width: 600px;
    width: 100%;
    margin: auto; 
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
/**Typeo CSS End (Note if is not need so remove)**/
.cw-textarea{
     resize: none;
     width: 100%;
     height: 100px;
     font-size: 16px;
     font-family: "Poppins", sans-serif;
     padding: 10px;
     box-sizing: border-box;
     border: solid 2px darkgrey;
     border-radius: 6px;
}
.cw-counter-container{
     display: flex;
     justify-content: space-between;
     padding: 0px 5px;
     font-size: 18px;
     width: 100%;

}

.cw-total-counter{
     color:slateblue;
}

.cw-remaining-counter{
    color: orangered;
}

h2{
     text-align: center;
}

 const textareaEl = document.getElementById("textarea");
    const totalCounterEl = document.getElementById("total-counter");
    const remainingCounterEl = document.getElementById("remaining-counter");
    textareaEl.addEventListener("keyup", () => {
      updateCounter();
    });
    updateCounter()
    function updateCounter() {
      totalCounterEl.innerText = textareaEl.value.length;
      remainingCounterEl.innerText =
        textareaEl.getAttribute("maxLength") - textareaEl.value.length;
    }