This react component resize the layout of HTML using a handle

npm install --save react-resize-layout react react-dom

or

yarn add react-resize-layout react react-dom

import React from "react";
import { render } from "react-dom";
import { Resize, ResizeVertical, ResizeHorizon } from "react-resize-layout";

// horizon
render(
    <Resize handleWidth="5px" handleColor="#777">
        <ResizeHorizon width="100px">Horizon 1</ResizeHorizon>
        <ResizeHorizon width="200px" minWidth="150px">
            Horizon 2
        </ResizeHorizon>
        <ResizeHorizon minWidth="5px">Horizon 3</ResizeHorizon>
    </Resize>,
    document.getElementById("example")
);

// vertical
render(
    <Resize handleWidth="5px" handleColor="#777">
        <ResizeVertical height="100px" minHeight="10px">
            Vertical 1
        </ResizeVertical>
        <ResizeVertical height="200px">Vertical 2</ResizeVertical>
        <ResizeVertical minHeight="50px">Vertical 3</ResizeVertical>
    </Resize>,
    document.getElementById("example2")
);

// horizon and vertical
render(
    <Resize handleWidth="2px" handleColor="#000">
        <ResizeVertical height="120px" minHeight="50px">
            Vertical 1
        </ResizeVertical>
        <ResizeVertical height="160px" minHeight="20px">
            <Resize handleWidth="8px" handleColor="red">
                <ResizeHorizon width="90px">Horizon 1</ResizeHorizon>
                <ResizeHorizon width="120px">Horizon 2</ResizeHorizon>
                <ResizeHorizon minWidth="50px">Horizon 3</ResizeHorizon>
            </Resize>
        </ResizeVertical>
        <ResizeVertical>Vertical 2</ResizeVertical>
    </Resize>,
    document.getElementById("example3")
);

//
// When you use either <ResizeHorizon> or <ResizeVertical> component
//

// work
<Resize>
   <ResizeHorizon>...</ResizeHorizon>
   <ResizeHorizon>...</ResizeHorizon>
</Resize>

// not work
<Resize>
   <ResizeHorizon>...</ResizeHorizon>
   <ResizeVertical>...</ResizeVertical>
</Resize>

// not work
<Resize>
   <ResizeHorizon>...</ResizeHorizon>
   <ResizeHorizon>...</ResizeHorizon>
   <div>...</div>
</Resize>