Question

I am having issues with my CSS. I am trying to make information display in 2 columns, denoted by the .left and .right classes.

You can see the issues at my jsFiddle

Answer 1

EDIT: Altering answer based on comments.

You are displaying tabular data – so use Tables. You can avoid nested tables by using the tbody tag, as demonstrated by this similar question:

For this solution, what you’ll do is create a table. Each TBODY will represent one ‘group’ of data. In each group, the first column will be for the metadata (like thead), and the second column will be the actual data:

<table>
  <tbody> <!-- First Set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td> Date </td>
      <td> 1/1/2003 </td>
    </tr>
    ...
  </tbody>
  <tbody>  <!-- Second set of Data -->
    <tr>
      <td> Sessions </td>
      <td> 5 </td>
    </tr>
    ...
  </tbody>
</table>

You can then style more easily using an external stylesheet, perhaps using the :nth-child selector and / or the colgroup tag or Javascript.

You might also get more answers if you re-name your question to something like "How to display tabular data with left hand column as key".