css positioning to mimic html table

Question

I am working on a project there I want to display data in 2 columns. Each column would contain a heading that I am trying to position on the left of the column and some data that would be positioned next to the heading (right side of the column).

The problem I am having is that I cannot seem to keep the heading and the data in the same position when changing the screen size or when there are large amounts of data. The data keeps dropping below the heading which is not what I am looking for.

I have tried the following css/html. I'm pretty sure I am close. I have also tried using html tables but the will not resize at all. Wondering if anyone knows how the adjust my code to make my layout appear like the picture below:

My Code:

.left, .right{
width: 49%;
float: left;
}
.block{
width: 100%;
float: left;
position:relative;
}
.leftHead, .rightHead{
width: 20%;
float: left;
}
.leftData, .rightData{
width: 79%;
float: left;
font-weight: bold;
}
<div class='left'>
    <div class='block'>
          <div class='leftHead'>
                left head
          </div>
          <div class='leftData'>
                left data
          </div>
    </div>
</div>
<div class='right'>
    <div class='block'>
          <div class='rightHead'>
                right head 1
          </div>
          <div class='rightData'>
                right data 1
          </div>
    </div>
    <div class='block'>
          <div class='rightHead'>
                right head 2
          </div>
          <div class='rightData'>
                right data 2
          </div>
    </div>
</div>

Answer 1

I would definitely use tables for this type of data. Here I've set the data columns' (td) widths to 100%, and the header columns (th) to not break to a new line. Maybe this accomplishes what you're looking for?

table.two-column {
  width: 50%;
  float: left;
  border-collapse: collapse;
}

.two-column th {
  white-space: nowrap;
}

.two-column td {
  width: 100%;
}

.two-column th,
.two-column td {
  vertical-align: top;
  padding: .25em;
}
  
table.orange th,
table.orange td {
  border: 2px solid orange;
}


table.green th,
table.green td {
  border: 2px solid green;
}

<table class="two-column orange">
  <tr>
    <th>Heading 1</th>
    <td>Lots of data here that should cause the cell to break to a new line but the heading should remain aligned vertically to the top.</td>
  </tr>
  <tr>
    <th>Heading 2</th>
    <td>Data 2</td>
  </tr>
</table>


<table class="two-column green">
  <tr>
    <th>Heading 3</th>
    <td>Data 3</td>
  </tr>
  <tr>
    <th>Heading 4</th>
    <td>Lots of data here that should cause the cell to break to a new line but the heading should remain aligned vertically to the top.</td>
  </tr>
</table>

Answer 2

Use display: table-cell instead of floats for the 'tabled' elements.

.left, .right{
    width: 49%;
    float: left;
}
.block{
    width: 100%;
    position:relative;
}
.leftHead, .rightHead{
    width: 20%;
    display: table-cell;
}
.leftData, .rightData{
    width: 79%;
    font-weight: bold;
    display: table-cell;
}

Here is a Fiddle if you want to see it in action.