css layout -div pull implemented resize columns

mouse resize columns pulling effects: primarily by resizesetting a transverse stretching freely adjusting the width of the target element

Adjust the size of the user whether the element predetermined attribute may resize. If you want this property to take effect, you need to set the element's overflow property value can be auto, hidden or scroll.

resize: none|both|horizontal|vertical;

Multi-line text entry box binding effect achieved:

Here is the code:

  //css:
 .stretching-column {
            overflow: hidden;
            border: 1px solid gray;
            width: 600px;
            height: 300px;
            line-height: 20px;
            font-size: 16px;
            color: orange;

        }

        .left {
            overflow: hidden;
            float: left;
            position: relative;
            height: 100%;
        }

        .right {
            overflow: hidden;
            padding: 10px;
            height: 100%;
            background-color: #f0f0f0;
            word-break: break-all;
        }

        .resize-bar {
            overflow: scroll;
            width: 250px;
            height: 100%;
            opacity: 0;
            resize: horizontal;
        }

        .resize-bar::-webkit-scrollbar {
            width: 250px;
            height: 100%;
        }

        .resize-bar:hover,
        :active .resize-line {
            border-left: 1px dashed gray;
        }

        .resize-line {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            border-left: 1px solid #ccc;
            border-right: 2px solid #f0f0f0;
            pointer-events: none;
        }

        .resize-text {
            overflow-x: hidden;
            position: absolute;
            left: 0;
            right: 5px;
            top: 0;
            bottom: 0;
            padding: 10px;
            word-break: break-all;
        }
        .my-textarea {
            width: 100%;
            height: 100%;
            padding: 10px;
            outline: none;
        }

//html:
<div class="stretching-column">
            <div class="left">
                <div class = "resize-bar "> </ div> 
                <div class="resize-line"></div>
                <div class="resize-text">
                    in the distance when you want to tears this hypocritical language structure experienced people will understand that pain is unspeakable. I deserve you do not you really deaf no one's moved secretly to see your microblogging broadcast your song so familiar 
                    that we take together that day heard singing too contrived it now sounds actually very vivid might be time now to make a person become tolerant ears always listening to music you feel lost hearing voices gently tell you how much I love the gentle night more than I in my ears 
                    now a person will always feel sad love songs are no longer here but I have not Zoutuo list of songs over the past flow 
                < / div> 
            </ div> 
            <div class = "right"> 
                <TextArea class = "My-TextArea" The autofocus = "The autofocus" placeholder = "tell the truth ..."> 
                    
                </ TextArea> 
            </ div> 
        < / div> 


// JS: 
        the let leftEle document.querySelector = (. "resize-text");
        let rightEle = document.querySelector(".my-textarea"); 
        rightEle.oninput = function () { 
            leftEle.innerHTML rightEle.value =; 
        }