How to create a table using multiple span in one div using CSS

Problem :

I got the following problem.

I am trying to create 2 columns using span with multiple rows inside a div. I am able to get the 2 columns but not not multiple rows.

The HTML code can't be changed.

span{
  display: inline-block;
}
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after  {
  content: '\A';
  white-space: pre;
}
.totalAmount, .oldTotal, .totalDue{
  float: left;
}
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{
  float: right;
}

<div class="payment-breakdown">
  <span class="totalAmount">Total:</span>
  <span class="totalAmount-dd">100USD</span>
  <span class="oldTotal">Previously paid:</span>
  <span class="oldTotal-dd">50USD</span>
  <span class="totalDue">Amount Due:</span>
  <span class="totalDue-dd">50USD</span>
</div>

Can someone guide me what I am doing wrong please?

Solution :

You could remove the whole css of your own and solve it using this simple css snippet:

.payment-breakdown span{
  display: block;
  width: 50%; 
  float: left;
}

JSFIDDLE DEMO

You can style each column using the pseudo selectors nth-child(odd) and nth-child(even).

JSFIDDLE DEMO WITH STYLED COLUMNS