如何将 react-tabs 与每个选项卡左侧显示的内容垂直对齐？

问：

我有一个应用了自定义 css 的 react-tab 组件。我需要垂直对齐选项卡列表，并且选项卡面板应与选项卡的右侧对齐，

我使用的CSS是，

.react-tabs__tab-list {
  display: flex;
  flex-direction: column;
  width: 12rem;
  margin-top: 1rem;
  justify-content: center;

  cursor: pointer;
  position: relative;
  padding: 0.5rem 1rem;
  /* margin: 1rem; */
  margin-top: 0;
  margin-right: 0;
  /* display: inline-block; */

  border: none;
}

.react-tabs__tab-panel {
  display: flex;
  flex-direction: column;
  margin-left: 12rem;
  position: relative;
  justify-content: center;
}

.react-tabs__tab-panel > div {
  display: flex;
  flex-direction: column;
  position: relative;
}

.react-tabs__tab-list > div {
  margin-top: 1rem;
}

.react-tabs__tab-list li {
  text-decoration: none;
  color: #ededed;
  cursor: pointer;
  position: relative;
  padding: 0.5rem 1rem;
  margin: 1rem;
  margin-top: 0;
  margin-right: 2rem;
  margin-left: 0;
  display: flex;
}

.react-tabs__tab-list .react-tabs__tab--selected {
  background: #ededed;
  border-color: #ededed;
  border-radius: 4px;
  color: #0b1e2e;
}

.react-tabs__tab-list .react-tabs__tab--selected:focus {
  background: #70ceea;
  color: #0b1e2e;
  box-shadow: none;
  text-decoration: none;
}

.react-tabs__tab:focus:after {
  background: #ededed;
}

.react-tabs__tab-panel--selected {
  -webkit-animation: 800ms ease-in-out 0s normal none 1 running customOne;
  animation: 800ms ease-in-out 0s normal none 1 running customOne;
}

我的组件页面是这样的，

<Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
  <TabList>
    <Tab >Title 1</Tab>
    <Tab>Title 2</Tab>
    <Tab >Title 3</Tab>
  </TabList>
  <TabPanel>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </TabPanel>
  <TabPanel>panel2</TabPanel>
</Tabs>

有些我无法在 UI.Is 中实现这种观点，有一个自定义道具可以提供给 Tabs 来执行此操作，或者更改 css 可以做到这一点。