<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        #aligner {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #container {
            width: 50%;
            height: 50%;
            background: #FF9800;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
        }

        #dimensions {
            font-size: 3em;
            color: #FFF;
        }

        #dim-x, #dim-y {
            color: #263248;
        }

    </style>
</head>
<body>
    <div id="aligner">
        <div id="container">
            <div id="dimensions">
                <span id="dim-x"></span>x<span id="dim-y"></span>
            </div>
        </div>
    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../build/element-resize-detector.js"></script>
    <script>
        $(function onDomReady() {
            function updateDimensions(element) {
                var style = getComputedStyle(element);
                var width = parseInt(style.width);
                var height = parseInt(style.height);
                $("#dim-x").html(width);
                $("#dim-y").html(height);
            }

            var container = $("#container");

            var erd = elementResizeDetectorMaker({
                strategy: "scroll",
                callOnAdd: true,
                debug: true
            });
            erd.listenTo(container, updateDimensions);

            container.click(function onContainerClick() {
                function rand(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }

                var width = rand(30, 90);
                var height = rand(30, 90);

                $(this).css({
                    width: width + "%",
                    height: height + "%"
                });
            });
        });
    </script>
</body>
</html>