JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>
                    <div id="counter"></div>

JavaScript

jQuery(document).ready(function($){

    function placeCaretAtEnd(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(false);
            textRange.select();
        }
    }

    const limit = 10;
    var rem = limit - $('#About').text().length;
    $("#counter").append("You have <strong>" + rem + "</strong> chars left.");
    $("#About").on('input', function(event) {
        var char = $(this).text().length;
        rem = limit - char;
        
        if(rem <= 0){
            $(this).text($(this).text().slice(0, 10));
            placeCaretAtEnd(this);
            return $("#counter").html("You have <strong>0</strong> chars left.");
        }
        $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    });
});