Html 让两个跳水运动员保持同样的高度，但不能互相覆盖

这是我的当前代码 有4个div的两个并排在中间。 我要做的是使两个子div与父div的高度相同，并显示白色背景

现在底部的div坐在中间的两个上面，背景不是白色的。 我一直在尝试不同的显示方法（表格、flex、网格），但还没有找到一个有效的组合

这是我的HTML

 <main>
<div class="full">
  <div class="gbar"><span class="hb">Testing text</span>
  </div>
  <div class="txt">
  <p>Testing text</p>
  </div>
</div>
<div class="dialog">
  <div class="left">
    <div class="obar"><span class="hb">Testing text</span>
    </div>
    <div class="txt">
      <p>Testing text</p>
      <p>Testing text</p>
      <p>Testing text</p>
      <p>Testing text</p>
    </div>
  </div>
  <div class="right">
    <div class="bbar"><span class="hb">Testing text</span>
    </div>
    <div class="txt">
      <p>Testing text</p>
      <p>Testing text</p>
    </div>
  </div>
</div>
<div class="full">
  <div class="ybar"><span class="hb">Testing text</span>
  </div>
  <div class="txt">
    <p>Testing text</p>
  </div>
</div>

---

将中间行更改为tabel布局

.dialog {
  display: table;
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.left, .right {
 background: #fff;
 display: table-cell;
 width: 50%;
}

正文{
保证金：0；
填充：0；
背景图片：url（“../img/bg.jpg”）；
背景重复：重复；
}
主要{
显示：块；
位置：相对位置；
填充顶部：10px；
宽度：950px；
保证金：0自动；；
}
.满{
显示：内联块；
位置：相对位置；
边缘顶部：10px；
显示：内联块；
宽度：100%；
}
.对话{
显示：表格；
位置：相对位置；
边缘顶部：10px；
宽度：100%；
}
.左，.右{
背景：#fff；
显示：表格单元格；
宽度：50%；
}
bbar先生{
宽度：100%；
背景：线性梯度（#4B4A5F，#6381D9）；
}
格巴尔先生{
宽度：100%；
背景：线性梯度（#589288，#576A63）；
}
奥巴尔先生{
宽度：100%；
背景：线性梯度（#C42D25，#EC694A）；
}
艾巴先生{
宽度：100%；
背景：线性梯度（F85A4D，#EAC746）；
}
圣{
显示：内联块；
字体大小：24px；
颜色：#fff；
填充：6px；
}
.hb{
显示：内联块；
填充：8px；
字号：18px；
颜色：#fff；
字体大小：粗体；
文本阴影：1px 1px 2px#000；
}
.txt{
填充：8px；
颜色：#000；
背景色：#fff；
}

测试文本
测试文本

测试文本
测试文本

测试文本

测试文本

测试文本

测试文本
测试文本

测试文本

测试文本
测试文本

您可以使用flex

    .dialog {
      margin-top: 10px;
      width: 100%;
      display: flex;
    }

    .left {
      flex: 1;
      background-color: white;
    }

    .right{
      flex: 1;
      background-color: white;
    }

---

这很有效，但它消除了它们之间的空间。您可以为左侧或右侧添加填充物-谢谢，这只是显示白色。我需要能够看到背景使用flex-

    .dialog {
      margin-top: 10px;
      width: 100%;
      display: flex;
    }

    .left {
      flex: 1;
      background-color: white;
    }

    .right{
      flex: 1;
      background-color: white;
    }