レイアウトサイズを変更するために左右にドラッグする純粋なCSS

.resize-bar::-webkit-scrollbar {
 幅: 200px; 高さ: 200px;
}

。カラム {
    オーバーフロー: 非表示;
}
.列左 {
    高さ: 400px;
    背景色: #fff;
    位置: 相対的;
    フロート: 左;
}
.列右 {
    高さ: 400px;
    パディング: 16px;
    背景色: #eee;
    ボックスのサイズ: 境界線ボックス;
    オーバーフロー: 非表示;
}
.サイズ変更保存{
    位置: 絶対;
    上: 0; 右: 5px; 下: 0; 左: 0;
    パディング: 16px;
    オーバーフロー-x:非表示;
}
.サイズ変更バー{
    幅: 200px; 高さ: 継承;
    サイズ変更: 水平;
    カーソル:ew-resize; 
    不透明度: 0;
    オーバーフロー: スクロール;
}
/* 線をドラッグ */
.resize-line {
    位置: 絶対;
    右: 0; 上: 0; 下: 0;
    右境界線: 2px 実線 #eee;
    左境界線: 1px 実線 #bbb;
    ポインタイベント: なし;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
    border-left: 1px 破線の空色;
}
.resize-bar::-webkit-scrollbar {
    幅: 200px; 高さ: 継承;
}

/*Firefox では下の小さな領域のみを拡大できます*/
@supports (-moz-user-select: none) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        左境界線: 1px 実線 #bbb;
    }
    .resize-bar:hover ~ .resize-line::after,
    .resize-bar:active ~ .resize-line::after {
        コンテンツ： '';
        位置: 絶対;
        幅: 16px; 高さ: 16px;
        下: 0; 右: -8px;
        背景: url(./resize.svg);
        背景サイズ: 100% 100%;
    }
}

<div class="column">
    <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
            左側のコンテンツ、左側のコンテンツ、左側のコンテンツ、左側のコンテンツ</div>                                            
    </div>
    <div class="column-right">
        右側のコンテンツ、右側のコンテンツ、右側のコンテンツ、右側のコンテンツ</div>
</div>