如何使div的边缘可调整大小而不是右下角的图标

Question

我遇到一个问题，让反应组件可以横向调整大小。当我在我的组件中添加resize属性时，如下所示：

.side-menu-container {
    display: 'inline-block';
    width: 15%;
    height: 100%;
    resize: horizontal;
    overflow-y: auto
}

我只在div的右下角获得一个可调整大小的标记，如下所示：

相反，我希望div的整个右边缘可以调整大小而不是右下角。我知道这可以通过javascript（试图保持严格的css）来完成，但我现在不确定如何在我的React组件中执行此操作。

这是使用此css类的组件的示例：

import './app.less';

export default class App extends Component {
    render() {
        return (
            <div className='main-window-container'>
                <div className='side-menu-container'>
                    <SideMenu />
                </div>
            </div>
        );
    }
}