Getting DIVs same height and not covering each other - html

Question

Here is my current code in JSfiddle
There are 4 Div's two that are side by side in the middle.
What I'm trying to do is get the two child divs to be the same height as the parent and show a white background.
Right now the bottom DIV is sitting on top of the two other ones in the middle and the background isn't white.
I've been messing with different display methods (table, flex, grid) but haven't found a working combination yet.
This is my 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>
This is the CSS part I'm trying to get working
.full {
display: inline-block;
position: relative;
margin-top: 10px;
display: inline-block;
width: 100%;
background-color: #fff;
}
.dialog {
display: block;
position: relative;
margin-top: 10px;
}
.left {
display: inline-block;
position: absolute;
width: 49%;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
}
.right {
display: inline-block;
position: absolute;
width: 49%;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
}

Answer 1

You can use flex
.dialog {
margin-top: 10px;
width: 100%;
display: flex;
}
.left {
flex: 1;
background-color: white;
}
.right{
flex: 1;
background-color: white;
}
https://jsfiddle.net/rnk44rtn/2/

Answer 2

Changed the middle row to tabel layout.
.dialog {
display: table;
position: relative;
margin-top: 10px;
width: 100%;
}
.left, .right {
background: #fff;
display: table-cell;
width: 50%;
}
body {
margin: 0;
padding: 0;
background-image: url("../img/bg.jpg");
background-repeat: repeat;
}
main {
display: block;
position: relative;
padding-top: 10px;
width: 950px;
margin: 0 auto;;
}
.full {
display: inline-block;
position: relative;
margin-top: 10px;
display: inline-block;
width: 100%;
}
.dialog {
display: table;
position: relative;
margin-top: 10px;
width: 100%;
}
.left, .right {
background: #fff;
display: table-cell;
width: 50%;
}
.bbar {
width: 100%;
background: linear-gradient(#4B4A5F, #6381D9);
}
.gbar {
width: 100%;
background: linear-gradient(#589288, #576A63);
}
.obar {
width: 100%;
background: linear-gradient(#C42D25, #EC694A);
}
.ybar {
width: 100%;
background: linear-gradient(#F85A4D, #EAC746);
}
.st {
display: inline-block;
font-size: 24px;
color: #fff;
padding: 6px;
}
.hb {
display: inline-block;
padding: 8px;
font-size: 18px;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
}
.txt {
padding: 8px;
color: #000;
background-color: #fff;
}
<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>
</main>
https://jsfiddle.net/afelixj/o3cm8jed/3/