Using CSS how best to display name value pairs?

Horizontal definition lists work pretty well, i.e.

<dl class="dl-horizontal">
  <dt>ID</dt>
  <dd>25</dd>
  <dt>Username</dt>
  <dd>Bob</dd>
</dl>

The dl-horizontal class is provided by the Bootstrap CSS framework.

From Bootstrap4:

<dl class="row">
  <dt class="col">ID</dt>
  <dd class="col">25</dd>
</dl>
<dl class="row">
  <dt class="col">Username</dt>
  <dd class="col">Bob</dd>
</dl>

I think tables are best used for tabular data, which it seems you have there.

If you do not want to use tables, the best thing would be to use definition lists(<dl> and <dt>). Here is how to style them to look like your old <td> layout. http://maxdesign.com.au/articles/definition/

I think that definition lists are pretty close semantically to name/value pairs.

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

Definition lists - misused or misunderstood?

It's perfectly reasonable to use tables for what seems to be tabular data.