class App extends React.Component {
  state = {
    width: 200,
    left: 0
  };
  startX = 0;
  startWidth = 0;

  render() {
    return (
      <div className="layoutRoot">
        <Resizable
          className="box"
          width={this.state.width}
          onResizeStart={(mouseEvent, node) => {
            this.startX = mouseEvent.clientX;
            this.startWidth = node.size.width;
          }}
          onResize={mouseEvent => {
            const offsetWidth = this.startX - mouseEvent.clientX;

            this.setState({
              width: this.startWidth + offsetWidth,
              left: this.startX - offsetWidth
            });
          }}
          resizeHandles={["w"]}
        >
          <div
            className="box-left"
            style={{
              width: this.state.width + "px",
              left: this.state.left + "px"
            }}
          >
            <span className="text">{"<Resizable Left>"}</span>
          </div>
        </Resizable>
      </div>
    );
  }
}