Html 如何在React中调整div表的大小？

我是新来的。我试图把两个

buttonBar+表格
以50-50的比例放在网页（顶部和底部）中。但是，我想通过拖动它来调整它们的大小。如何将“buttonBar”和“table”分组为组件，并使它们成为可调整大小的
div
。是否有任何库可以使用，或者可以通过
html
和
css
实现？这是我的密码。谢谢

<div id='buttonBar1'>
  <....lots button......>
</div>
<div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
</div>

<div id='buttonBar2'>
  <....lots button......>
</div>
<div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", position:'relative', height:"40vh"}}>
  <Table id={'Table_2'} />
</div>

这里有一个快速方法，您可以尝试一下。将您的
表格+按钮栏
放在一个div中，这两个div都可以放在
容器中
。因为您使用的是React，所以可以使用库来调整div的大小。也要检查一下

只需使用内置于
table responsive
class的引导程序即可。@Ahmad谢谢你的回答，但这并不是我想要的。实际上，我想让它像分割屏幕一样，并将它们作为两个组件分开。并让用户调整页面的高度。谢谢你的回答，它看起来像我想要的。让我试着实施它。再次感谢。
<div className="container">
<Resizable axis="y" draggableOpts={resizeHandles: ['s']}>
 <div className="group-one">
  <div id='buttonBar1'>
   <....lots button......>
 </div>
 <div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", 
 position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
 </div>
</div>
</Resizable>
<Resizable axis="y" draggableOpts={resizeHandles: ['n']}>
<div className="group-two">

 <div id='buttonBar2'>
   <....lots button......>
 </div>
 <div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", 
 position:'relative', height:"40vh"}}>
   <Table id={'Table_2'} />
 </div>
</Resizable>
</div>
</div>

.container {
 display: flex;
 flex-direction: column;
}
.group-one, .group-two {
 height: 50%;
}