How can I add rows to this 'table' and align it?
<p>I'd like to make rows between each topic, so if one is extra long it will align both sides, so when you get to the bottom they end on the same level.
<a href="http://jsfiddle.net/EMaDB/1401/" rel="nofollow">http://jsfiddle.net/EMaDB/1401/</a></p>

<pre><code>&lt;div class="tleft"&gt;
      &lt;p&gt;&lt;span class="cat"&gt;Method: 
&lt;/span&gt;testing testing testing testing testing testing testing &lt;/p&gt;
      &lt;p&gt;&lt;span class="cat"&gt;Type: &lt;/span&gt; testing testing testing testing testing testing testing testing testing testing &lt;/p&gt;
      &lt;p&gt;&lt;span class="cat"&gt;bright: &lt;/span&gt;185&lt;/p&gt;
      &lt;p&gt;&lt;span class="cat"&gt;Max: &lt;/span&gt;5kg&lt;/p&gt;
      &lt;p&gt;&lt;span class="cat"&gt;Ratio: &lt;/span&gt;6:1&lt;/p&gt;
      &lt;/div&gt;
&lt;div class="tright"&gt;
    &lt;ul&gt;
    &lt;p&gt;&lt;span class="cat"&gt;Brand Name: &lt;/span&gt;Bright&lt;/p&gt;
    &lt;p&gt;&lt;span class="cat"&gt;Test: &lt;/span&gt;Left/Right&lt;/p&gt;
    &lt;p&gt;&lt;span class="cat"&gt;Testing: &lt;/span&gt;20&lt;/p&gt;
    &lt;p&gt;&lt;span class="cat"&gt;Capacity: &lt;/span&gt;5&lt;/p&gt;
    &lt;p&gt;&lt;span class="cat"&gt;Weight: &lt;/span&gt;5g&lt;/p&gt;    
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.tleft {
    float: left;
    width: 50%;
}

.tright {
    margin-left: 50%;
}
.cat {
        color: #017b63;
        }
</code></pre>

<p>Thanks for the help!</p>