Two column drop-down without table

I want to make this drop-down menu:

       |  Heading
----------------
action |  Item
action |  Item
action |  Item
action |  Item

action could be "Change" and Item could be something like "Users". Semantically it would make sense to have this HTML:

<h3>Heading</h3>
<dl>
  <dt>action</dt>
    <dd>Item</dd>
  <dt>a开发者_开发技巧ction</dt>
    <dd>Item</dd>
</dl>

But as far as I know, there is no way to make the action and Item align, as we don't want fixed heights or widths.

The obvious would be to use a <table/>, but since this isn't tabular data, it's pretty ugly. Can I create this design without using a HTML table? Thank you for your time.

You can actually align dt and dd with float:left like this:

dt {
  float:left;   
}

See this jsFiddle

Sometimes you have to use a <table>. Until someone suggests something else

ok so heres how its going to work

<ul>

<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>
<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>
<li>
    <span class="action">"Put Action Here"</>
    <span class="item>"Put Item Here"</>
</li>

</ul>

and then in CSS you can position them:

.action {float:left;}
.item {float:right;}

Just tried it on Fiddle and it worked beautifully!