请教一下，css如何使左右两边的div高度自适应相等

Question

现在有一个需求
基本结构

<div class="parent">
    <div>
        <table>....</table>
    </div>
    <div>
        <textarea ></textarea>
    </div>
</div>

在parent里面又两个div,左边div中表格的高度根据tr的高度撑开，tr的数量不定。右边div中textarea的高度根据左边div的自适应。现在的css

.parent{
    width:800px;
    
}
div div {
  background: #1296db;
  margin-bottom:-3000px;
  padding-bottom:3000px;
  display: inline-block;
  height: auto;
  width: 50%;
  vertical-align: top;}
 textarea{
  height: 100%;
  width: 100%;

}

现在虽然左右两个div的高度看起来一样，但是右边textarea的高度并不充满div的高度。
请问一下该如何实现这个布局

Answer 1

.parent{
    display: flex;
    width:800px;
}
                
.parent div {
    width: 50%;
}

.parent textarea {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}