I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file.

I have two tables with 2 columns and 4 rows each that need to be put side-by-side.

I have put my html & css in fiddle.

http://jsfiddle.net/mika6891/7b0k049r/1/

My HTML code:

<!-- gene description -->
  <div id="container">
  <div id="gene_A_description" >GENE - A</div>
  <div id="gene_B_description" >GENE - B</div>
  </div>

 <div id="container">
  <table id="gene_A_text" class="listitems2">
      <tr>
          <td><b>test1</b></td>
          <td><!--test1-->test1</td>
      </tr>
      <tr>
          <td><b>test2</b></td>
          <td><!--test2-->test2</td>
      </tr>
      <tr>
          <td><b>test3</b></td>
          <td><!--test3-->test3</td>
      </tr>
      <tr>
          <td><b>test4</b></td>
          <td><!--test4-->test test test test test test test test test test test test test test test test</td>
      </tr>
      </table>

     <div id="container">
  <table id="gene_A_text" class="listitems2">
      <tr>
          <td><b>test1</b></td>
          <td><!--test1-->1</td>
      </tr>
      <tr>
          <td><b>test2</b></td>
          <td><!--test2-->+</td>
      </tr>
      <tr>
          <td><b>test3</b></td>
          <td><!--test3-->test3</td>
      </tr>
      <tr>
          <td><b>test4</b></td>
          <td><!--test4-->test test </td>
      </tr>
      </table>

  <div id="container">
  <div id="gene_A_description" >GENE - C</div>
  <div id="gene_B_description" >GENE - D</div>
  </div>

My CSS-code

table{
font-family:Arial;
border-collapse: separate;
border-spacing: 10px;
}

#container{
width: 500px;
margin-left: auto;
margin-right: auto;
}

#gene_A_description{
width:200px;
height:50px;
background-color:#e13737;
color:white;
text-align:center;
margin-top: 30px;
float: left;
font-family: 'Arial Black', Gadget, sans-serif;
line-height: 50px;
}

#gene_B_description{
width:200px;
height:50px;
background-color:#e13737;
color:white;
text-align:center;
margin-top:30px;
float: right;
font-family: 'Arial Black', Gadget, sans-serif;
line-height: 50px;
 }

table.listitems2 {
width: 150px; 
margin-left: auto;
margin-right: auto;
}

 #gene_A_text{
float:left;
}

#gene_B_text{
float:right;
}

Now these html will be automatically generated so the table for GENE_A_TEXT and GENE_B_TEXT will never contain the same information and so will also not be of the same heigth, as can be seen in the example (because of test4 row).

I would want that the same rows in table GENE_A_TEXT and GENE_B_TEXT have the same height, depending on the amount of information that is in there. So that my next GENE_C_DESCRIPTION and GENE_D_DESCRIPTION start at the same height, and not like it is now, that they are placed below GENE_B_TEXT

This is a picture of how it should look like