Make the left panel overlay the right one and the splitter be draggable

Question

I have made a draggable split panel by https://github.com/johnwalley/allotment. At the moment, the two panels are displayed side by side. I would like the left panel to overlap the right panel and the splitter to be draggable to resize the left panel. Does anyone know how to do that?

Additionally, is the basic purpose and design principle behind the Allotment component is to provide panes that are next to each other? If so, is it still a good idea to realize my requirement with allotment?

Here is the code: https://codesandbox.io/s/reset-forked-t2fsgn?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical={false}
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane preferredSize="0%" minSize={20}>
            left <br /> left <br />
            left <br /> left <br />
            left <br /> left <br />
            left <br /> left <br />
            left <br /> left <br />
            left <br /> left <br />
          </Allotment.Pane>
          <Allotment.Pane>
            right right right <br />
            right right right <br />
            right right right <br />
            right right right <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}