All,

What is the simplest way to create a simple layout that looks like this, in HTML and CSS:

[![enter image description here](https://i.stack.imgur.com/e6kuB.png)](https://i.stack.imgur.com/e6kuB.png)

Specifically - a right-aligned label on the left, and a left-aligned value on the right.

I don't want to hard-code the width of the left-column - that should be determined based on the width of the longest label.

I'm looking for an approach that's at least reasonably semantic, works well with screen-readers (e.g., screen reader should read the label, and then the value, not all the labels, then all the values), and doesn't require a whole bunch of additional `<div>` elements.

This seems like a reasonably common layout, so I'm assuming there's a *very* easy way to do it. But I've yet to figure that out myself.

A `<table>` would work perfectly, but as everyone reminds me, never use a `<table>` just for layout. And this is clearly not tabular data.

Thanks in advance!