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

Question

现在有一个需求
基本结构

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

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

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

}

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

Answer 1

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

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