I am trying to use DIV's instead of tables. I want every other cell to have a green background and the others to have a white background.

The problem is that when data on the white cell is larger than that of the other white cell in that row, the smaller one doesn't stretch to meet the height of the other "cell".

Sounds simple but I am finding it isn't.

Here is my HTML and my CSS.

Thanks in advance!

HTML Code:
<div class="div-table basicinfo">
  <div class="row-no-hover">
    <div class="row-data tright">Name</div>
    <div class="row-data tleft">asdf asdf</div>

    <div class="row-data tright">Address</div>
    <div class="row-data tleft"><p>123 easy street</p><p>123 easy street</p></div>
  </div>
</div>
Code:
@charset "utf-8";
/* CSS Document */

.tright{
text-align: right;
}
.tleft{
text-align: left;
}
.div-table{
width: 100%;
float: left;
border: 1px solid #ccc;
margin: 12px 0;
}
.div-table .row-no-hover{
float: left;
width: 100%;
padding: 0;
margin: 0;
}

.div-table .row-no-hover .row-data{
float: left;
width: 22.88%;
padding: 0 1%;
}
.div-table.basicinfo{
border-top: 0;
border-right: 0;

}
.div-table.basicinfo .row-no-hover{
background: #efefef;
border-top: 1px solid #ccc;
}

.div-table.basicinfo .row-no-hover .row-data.tright{
background: #efefef;
}

.div-table.basicinfo .row-no-hover .row-data.tleft{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
height: 100%;
}