title: Create a two-column layout of with right aligned labels and left aligned values in CSS
body: <p>All,</p>
  
  <p>What is the simplest way to create a simple layout that looks like this, in HTML and CSS:</p>
  
  <p><a href="https://i.stack.imgur.com/e6kuB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/e6kuB.png" alt="enter image description here"></a></p>
  
  <p>Specifically - a right-aligned label on the left, and a left-aligned value on the right.</p>
  
  <p>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.</p>
  
  <p>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 <code>&lt;div&gt;</code> elements.</p>
  
  <p>This seems like a reasonably common layout, so I'm assuming there's a <em>very</em> easy way to do it. But I've yet to figure that out myself.</p>
  
  <p>A <code>&lt;table&gt;</code> would work perfectly, but as everyone reminds me, never use a <code>&lt;table&gt;</code> just for layout. And this is clearly not tabular data.</p>
  
  <p>Thanks in advance!</p>