反应按钮相对于滑块的位置

Question

使用react.js和react-splitter-layout，我试图在左窗格中创建一个右对齐按钮，该按钮会根据滑块更改其位置（现在它位于div的中心）。 [请参阅沙箱：https://codesandbox.io/s/distracted-matsumoto-1hg2t]

我在代表处拍摄的照片：

import React from "react";
import ReactDOM from "react-dom";
import SplitterLayout from "react-splitter-layout";
import "./styles.css";
import 'react-splitter-layout/lib/index.css';

function App() {
  return (
    <div className="App">
    <SplitterLayout >
      <div>
        <button>One</button>
     </div>
      <div>Two</div>
    </SplitterLayout>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

该库的文档包括事件[https://github.com/zesik/react-splitter-layout/blob/master/example/javascripts/components/HorizontalLayoutWithEvents.jsx]的演示，我认为这可能是按钮位置相对于条形的正确轨道，但我对react.js感到陌生如何使用this.state来获得按钮位置的指导？

所需的输出：