Need help styling this html and css

I am having trouble styling the html below to make it display as in the format desired below.

<div id="restinfo">
<div class="sub">Coloso</div>
<div class="sub">978-897-7723'</div>
<div class="sub">339 main street</div>
<div class="sub">worcester,ma</div>
<div class="sub">01561</div>

I am looking to make it look like this

—Format desired—

-----Name: Coloso
-------Tel: 978-450-2321
– Address: 2334 sedwick ave.
------------Worcester, ma

I Want to say the dashes don’t apply to the desired format, I just put it in there for padding because it would not display like that after posting

help please.

Can you modify the HTML to put them in lists?

If not, you could just add classes to the elements and float them (clear the next element) :).

Wrap it all in a list (ul/li) >> give each li a different id >> and give each id your desired padding.

It seems that going for the ul li is the desired.

Thank you guys.

Using a <ul> is not semantically correct. Using <label> for anything other than marking up a label for a form control is not semantically correct. Mixing inline <label> elements with block-level <div> elements is semantically questionable.

Here’s how I’d mark it up,

<dl id="restinfo">
  <dt>Name:</dt>             <dd>Coloso</dd>
  <dt><abbr>Tel</abbr>:</dt> <dd>978-897-7723</dd>
  <dt>Address:</dt>          <dd>339 Main Street
                                 <br>Worcester, <abbr>Ma</abbr>
#restinfo dt {float:left; clear:left; width:6em; text-align:right}
#restinfo dd {margin-left:7em}

Using a definition list is slightly contrived, but nowhere nearly as much as using an unordered list.

A definition list would technically be correct, since the term shares a defining relationship with the descriptors.

I believe:

Definition lists can be used to tie together any items that have a direct relationship with each other (name/value sets).