W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML onresize Attribute Example</title>
    <meta charset="utf-8" />
    <style>
        #myDIV {
            width: 350px;
            height: 100px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h2>HTML onresize Attribute Example</h2>
    <p>Try changing the size of the border surrounding the div element.</p>
    <p id="mypara"></p>
    <div id="myDIV" width="300" height="300"></div>
    <script>
        document.getElementById("myDIV").style.resize = "both";
        const resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                let w = entry.contentRect.width;
                let h = entry.contentRect.height;
                let txt = "Element width: " + w + "<br>Element height: " + h;
                document.getElementById("mypara").innerHTML = 'Element resized <br>' + txt;

document.getElementById("myDIV").style.border = "2px dashed blue";
                document.getElementById("myDIV").innerHTML = 'Element resized:' + "<br>Element width:" + w + "<br>Element width:" + h;
            }
        });
        resizeObserver.observe(document.getElementById("myDIV"));  
    </script>
</body>
</html>