Resizable Divs Horizontal and Vertical

HTML

 
<div id="app">
    <div class="resizable-x">
        <div class="div0" style="flex: 50%">
            <p>div 0</p>
        </div>
        <div class="resizer-x"></div>
        <div class="resizable-y" style="flex: 50%">
            <div class="div1" style="flex: 33.33%">
                <p>div 1</p>
            </div>
            <div class="resizer-y"></div>
            <div class="div2" style="flex: 66.66%">
                <p>div 2</p>
            </div>
        </div>
    </div>
</div>

CSS

​x
 
html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
​
*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
​
#app {
    width: 100%;
    height: 100%;
​
    font-family: Arial, Helvetica, sans-serif;
}
​
.resizable-x,
.resizable-y {
    display: flex;
    overflow: hidden;
}
​
.resizable-x {
    height: 100%;
}
​
.resizable-y {
    flex-direction: column;
}
​
.resizer-x,
.resizer-y {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    padding: 4px;
}
​
.resizer-x {
    z-index: 2;
    cursor: col-resize;
}
.resizer-x::before,
.resizer-x::after {
    content: "";
    width: 2px;
    height: 16px;
    margin: 2px;
    background: lightgray;
}
​
.resizer-y {
    z-index: 1;
    cursor: row-resize;
    flex-direction: column;
}
.resizer-y::before,
.resizer-y::after {
    content: "";
    width: 16px;
    height: 2px;
    margin: 2px;
    background: lightgray;
}
​
.div0,
.div1,
.div2 {
    overflow: hidden;
}
​
.div0 {
    background: dodgerblue;
}
​
.div1 {
    background: pink;
}
​
.div2 {
    background: gold;
}
​
.div0 p,
.div1 p,
.div2 p {
    font-size: 2rem;
    margin-left: 1em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
}

xxxxxxxxxx
 
(function () {
    "use strict";
​
    // horizontal direction
    (function resizableX() {
        const resizer = document.querySelector(".resizer-x");
        resizer.addEventListener("mousedown", onmousedown);
        resizer.addEventListener("touchstart", ontouchstart);
​
        // for mobile
        function ontouchstart(e) {
            e.preventDefault();
            resizer.addEventListener("touchmove", ontouchmove);
            resizer.addEventListener("touchend", ontouchend);
        }
        function ontouchmove(e) {
            e.preventDefault();
            const clientX = e.touches[0].clientX;
            const deltaX = clientX - (resizer._clientX || clientX);
            resizer._clientX = clientX;
            const l = resizer.previousElementSibling;
            const r = resizer.nextElementSibling;
            // LEFT
            if (deltaX < 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(l).width) + deltaX
                );
                l.style.flex = `0 ${w < 10 ? 0 : w}px`;
                r.style.flex = "1 0";
            }
            // RIGHT
            if (deltaX > 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(r).width) - deltaX
                );
                r.style.flex = `0 ${w < 10 ? 0 : w}px`;
                l.style.flex = "1 0";
            }
        }
        function ontouchend(e) {
            e.preventDefault();
            resizer.removeEventListener("touchmove", ontouchmove);
            resizer.removeEventListener("touchend", ontouchend);
            delete e._clientX;
        }
​
        // for desktop
        function onmousedown(e) {
            e.preventDefault();
            document.addEventListener("mousemove", onmousemove);
            document.addEventListener("mouseup", onmouseup);
        }
        function onmousemove(e) {
            e.preventDefault();
            const clientX = e.clientX;
            const deltaX = clientX - (resizer._clientX || clientX);
            resizer._clientX = clientX;
            const l = resizer.previousElementSibling;
            const r = resizer.nextElementSibling;
            // LEFT
            if (deltaX < 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(l).width) + deltaX
                );
                l.style.flex = `0 ${w < 10 ? 0 : w}px`;
                r.style.flex = "1 0";
            }
            // RIGHT
            if (deltaX > 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(r).width) - deltaX
                );
                r.style.flex = `0 ${w < 10 ? 0 : w}px`;
                l.style.flex = "1 0";
            }
        }
        function onmouseup(e) {
            e.preventDefault();
            document.removeEventListener("mousemove", onmousemove);
            document.removeEventListener("mouseup", onmouseup);
            delete e._clientX;
        }
    })();
​
    // vertical direction
    (function resizableY() {
        const resizer = document.querySelector(".resizer-y");
        resizer.addEventListener("mousedown", onmousedown);
        resizer.addEventListener("touchstart", ontouchstart);
​
        // for mobile
        function ontouchstart(e) {
            e.preventDefault();
            resizer.addEventListener("touchmove", ontouchmove);
            resizer.addEventListener("touchend", ontouchend);
        }
        function ontouchmove(e) {
            e.preventDefault();
            const clientY = e.touches[0].clientY;
            const deltaY = clientY - (resizer._clientY || clientY);
            resizer._clientY = clientY;
            const t = resizer.previousElementSibling;
            const b = resizer.nextElementSibling;
            // UP
            if (deltaY < 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(t).height) + deltaY
                );
                t.style.flex = `0 ${h < 10 ? 0 : h}px`;
                b.style.flex = "1 0";
            }
            // DOWN
            if (deltaY > 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(b).height) - deltaY
                );
                b.style.flex = `0 ${h < 10 ? 0 : h}px`;
                t.style.flex = "1 0";
            }
        }
        function ontouchend(e) {
            e.preventDefault();
            resizer.removeEventListener("touchmove", ontouchmove);
            resizer.removeEventListener("touchend", ontouchend);
            delete e._clientY;
        }
​
        // for desktop
        function onmousedown(e) {
            e.preventDefault();
            document.addEventListener("mousemove", onmousemove);
            document.addEventListener("mouseup", onmouseup);
        }
        function onmousemove(e) {
            e.preventDefault();
            const clientY = e.clientY;
            const deltaY = clientY - (resizer._clientY || clientY);
            resizer._clientY = clientY;
            const t = resizer.previousElementSibling;
            const b = resizer.nextElementSibling;
            // UP
            if (deltaY < 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(t).height) + deltaY
                );
                t.style.flex = `0 ${h < 10 ? 0 : h}px`;
                b.style.flex = "1 0";
            }
            // DOWN
            if (deltaY > 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(b).height) - deltaY
                );
                b.style.flex = `0 ${h < 10 ? 0 : h}px`;
                t.style.flex = "1 0";
            }
        }
        function onmouseup(e) {
            e.preventDefault();
            document.removeEventListener("mousemove", onmousemove);
            document.removeEventListener("mouseup", onmouseup);
            delete e._clientY;
        }
    })();
})();

<!doctype html><html><head> <script src="https://raw.githack.com/albughisy7/BLOGGER/main/Jun_Kode/jQuery/jquery.min.js"></script> <style> *{color:#1d1e22; border-color:#1d1e22; background: transparent;/*#fefefe*/ scrollbar-width:thin; scrollbar-color: #d8d8d8 transparent}  input{border:1px solid; outline: none;} button{padding: 4px 8px}html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

#app {
    width: 100%;
    height: 100%;

font-family: Arial, Helvetica, sans-serif;
}

.resizable-x,
.resizable-y {
    display: flex;
    overflow: hidden;
}

.resizable-x {
    height: 100%;
}

.resizable-y {
    flex-direction: column;
}

.resizer-x,
.resizer-y {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    padding: 4px;
}

.resizer-x {
    z-index: 2;
    cursor: col-resize;
}
.resizer-x::before,
.resizer-x::after {
    content: "";
    width: 2px;
    height: 16px;
    margin: 2px;
    background: lightgray;
}

.resizer-y {
    z-index: 1;
    cursor: row-resize;
    flex-direction: column;
}
.resizer-y::before,
.resizer-y::after {
    content: "";
    width: 16px;
    height: 2px;
    margin: 2px;
    background: lightgray;
}

.div0,
.div1,
.div2 {
    overflow: hidden;
}

.div0 {
    background: dodgerblue;
}

.div1 {
    background: pink;
}

.div2 {
    background: gold;
}

.div0 p,
.div1 p,
.div2 p {
    font-size: 2rem;
    margin-left: 1em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
      background: transparent;
} </style> </head><body> <div id="app">
    <div class="resizable-x">
        <div class="div0" style="flex: 50%">
            <p>div 0</p>
        </div>
        <div class="resizer-x"></div>
        <div class="resizable-y" style="flex: 50%">
            <div class="div1" style="flex: 33.33%">
                <p>div 1</p>
            </div>
            <div class="resizer-y"></div>
            <div class="div2" style="flex: 66.66%">
                <p>div 2</p>
            </div>
        </div>
    </div>
</div><script> (function () {
    "use strict";

// horizontal direction
    (function resizableX() {
        const resizer = document.querySelector(".resizer-x");
        resizer.addEventListener("mousedown", onmousedown);
        resizer.addEventListener("touchstart", ontouchstart);

// for mobile
        function ontouchstart(e) {
            e.preventDefault();
            resizer.addEventListener("touchmove", ontouchmove);
            resizer.addEventListener("touchend", ontouchend);
        }
        function ontouchmove(e) {
            e.preventDefault();
            const clientX = e.touches[0].clientX;
            const deltaX = clientX - (resizer._clientX || clientX);
            resizer._clientX = clientX;
            const l = resizer.previousElementSibling;
            const r = resizer.nextElementSibling;
            // LEFT
            if (deltaX < 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(l).width) + deltaX
                );
                l.style.flex = `0 ${w < 10 ? 0 : w}px`;
                r.style.flex = "1 0";
            }
            // RIGHT
            if (deltaX > 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(r).width) - deltaX
                );
                r.style.flex = `0 ${w < 10 ? 0 : w}px`;
                l.style.flex = "1 0";
            }
        }
        function ontouchend(e) {
            e.preventDefault();
            resizer.removeEventListener("touchmove", ontouchmove);
            resizer.removeEventListener("touchend", ontouchend);
            delete e._clientX;
        }

// for desktop
        function onmousedown(e) {
            e.preventDefault();
            document.addEventListener("mousemove", onmousemove);
            document.addEventListener("mouseup", onmouseup);
        }
        function onmousemove(e) {
            e.preventDefault();
            const clientX = e.clientX;
            const deltaX = clientX - (resizer._clientX || clientX);
            resizer._clientX = clientX;
            const l = resizer.previousElementSibling;
            const r = resizer.nextElementSibling;
            // LEFT
            if (deltaX < 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(l).width) + deltaX
                );
                l.style.flex = `0 ${w < 10 ? 0 : w}px`;
                r.style.flex = "1 0";
            }
            // RIGHT
            if (deltaX > 0) {
                const w = Math.round(
                    parseInt(getComputedStyle(r).width) - deltaX
                );
                r.style.flex = `0 ${w < 10 ? 0 : w}px`;
                l.style.flex = "1 0";
            }
        }
        function onmouseup(e) {
            e.preventDefault();
            document.removeEventListener("mousemove", onmousemove);
            document.removeEventListener("mouseup", onmouseup);
            delete e._clientX;
        }
    })();

// vertical direction
    (function resizableY() {
        const resizer = document.querySelector(".resizer-y");
        resizer.addEventListener("mousedown", onmousedown);
        resizer.addEventListener("touchstart", ontouchstart);

// for mobile
        function ontouchstart(e) {
            e.preventDefault();
            resizer.addEventListener("touchmove", ontouchmove);
            resizer.addEventListener("touchend", ontouchend);
        }
        function ontouchmove(e) {
            e.preventDefault();
            const clientY = e.touches[0].clientY;
            const deltaY = clientY - (resizer._clientY || clientY);
            resizer._clientY = clientY;
            const t = resizer.previousElementSibling;
            const b = resizer.nextElementSibling;
            // UP
            if (deltaY < 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(t).height) + deltaY
                );
                t.style.flex = `0 ${h < 10 ? 0 : h}px`;
                b.style.flex = "1 0";
            }
            // DOWN
            if (deltaY > 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(b).height) - deltaY
                );
                b.style.flex = `0 ${h < 10 ? 0 : h}px`;
                t.style.flex = "1 0";
            }
        }
        function ontouchend(e) {
            e.preventDefault();
            resizer.removeEventListener("touchmove", ontouchmove);
            resizer.removeEventListener("touchend", ontouchend);
            delete e._clientY;
        }

// for desktop
        function onmousedown(e) {
            e.preventDefault();
            document.addEventListener("mousemove", onmousemove);
            document.addEventListener("mouseup", onmouseup);
        }
        function onmousemove(e) {
            e.preventDefault();
            const clientY = e.clientY;
            const deltaY = clientY - (resizer._clientY || clientY);
            resizer._clientY = clientY;
            const t = resizer.previousElementSibling;
            const b = resizer.nextElementSibling;
            // UP
            if (deltaY < 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(t).height) + deltaY
                );
                t.style.flex = `0 ${h < 10 ? 0 : h}px`;
                b.style.flex = "1 0";
            }
            // DOWN
            if (deltaY > 0) {
                const h = Math.round(
                    parseInt(getComputedStyle(b).height) - deltaY
                );
                b.style.flex = `0 ${h < 10 ? 0 : h}px`;
                t.style.flex = "1 0";
            }
        }
        function onmouseup(e) {
            e.preventDefault();
            document.removeEventListener("mousemove", onmousemove);
            document.removeEventListener("mouseup", onmouseup);
            delete e._clientY;
        }
    })();
})(); </script> </body> </html>

<!doctype html><html><head> <script src="https://raw.githack.com/albughisy7/BLOGGER/main/Jun_Kode/jQuery/jquery.min.js"></script> <style> *{color:#1d1e22; border-color:#1d1e22; background: transparent;/*#fefefe*/ scrollbar-width:thin; scrollbar-color: #d8d8d8 transparent}  input{border:1px solid; outline: none;} button{padding: 4px 8px}html,