Usando CSS, ¿cuál es la mejor manera de mostrar pares de valores de nombre?

¿Debería seguir usando tablas de todos modos?

El código de la tabla que estaría reemplazando es:

<table>
    <tr>
        <td>Name</td><td>Value</td>
    </tr>
    ...
</table>

Por lo que he estado leyendo, debería tener algo como

<label class="name">Name</label><label class="value">Value</value><br />
...

Ideas y enlaces a muestras en línea muy apreciadas. Soy un desarrollador fuera de mi profundidad de diseño.

EDITAR: Mi necesidad es poder mostrar los datos a un usuario y editar los valores en una forma separada (pero casi idéntica).

Creo que las listas de definición son bastante parecidas semánticamente a los pares de nombre/valor.

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

Listas de definición: ¿mal utilizadas o mal entendidas?

Las listas de definiciones horizontales funcionan bastante bien, es decir

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

los dl-horizontal La clase es proporcionada por el marco Bootstrap CSS.

De 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>

Creo que las tablas se usan mejor para datos tabulares, que parece que tienes allí.

Si no quieres usar tablas, lo mejor sería usar listas de definiciones (<dl> and <dt>). Aquí se explica cómo diseñarlos para que se vean como su viejo <td> diseño.
http://maxdesign.com.au/articles/definition/

Es perfectamente razonable usar tablas para lo que parecen ser datos tabulares.

Si estoy escribiendo un formulario, generalmente uso esto:

<form ... class="editing">
    <div class="field">
        <label>Label</label>
        <span class="edit"><input type="text" value="Value" ... /></span>
        <span class="view">Value</span>
    </div>
    ...
</form>

Luego en mi css:

.editing .view, .viewing .edit { display: none }
.editing .edit, .editing .view { display: inline }

Luego, con un poco de JavaScript, puedo cambiar la clase del formulario de edición a visualización.

Menciono este enfoque porque quería mostrar y editar los datos con casi el mismo diseño y esta es una forma de hacerlo.

Al igual que macbirdie, me inclinaría a marcar datos como este como una lista de definiciones a menos que se pueda juzgar que el contenido de la tabla existente realmente ser contenido tabular.

Evitaría usar la etiqueta de la etiqueta en la forma que propones. Eche un vistazo a la explicación de la etiqueta de la etiqueta @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label – realmente tiene la intención de permitirle concentrarse en su control asociado. También evite usar divs y spans genéricos ya que desde un punto de vista semántico son débiles.

Si muestra varios pares de nombre y valor en una pantalla, pero edita solo uno en una pantalla de edición, usaría una tabla en la primera pantalla y una lista de definiciones en la última.

use la propiedad float: por ejemplo: css:

.left {
  float:left;
  padding-right:20px
}

html:

<div class="left">
 Name<br/>
 AnotherName
</div>
<div>
 Value<br />
 AnotherValue
</div>