Using <dl> instead of table for side by side list

If you need a label and a description or in definition terminology a term and a definition list and you want the term next to the definition. You can use css to achieve that with floats.

Suppose this

<dl>
  <dt>term label 1</dt>
  <dd>term definition 1</dd>
  <dt>term label 2</dt>
  <dd>term definition 2</dd>
</dl>

Float will make the label and definition side by side but you need to adjust the widths to make sure the lines break for the next set of term/def. You can use percentages on your css to accomplish this.

dl dd {
padding: 0 1%;
float: left;
width: 88%
}

dl dt {
float: left;
padding: 0 1%;
width: 8%;
margin-top: 0;
}

In this case I decided to give my label 8% of the width and the definition the remainder of 88%. That doesn't add up to 100% because I used 1% padding left to right for each element.