Cannot push dd over to the left - html

Question

Still a CSS newbie, not quite sure what to do
I am having difficulty getting my dd elements to line up directly next to their respective dt elements. They seem to align far to the right and I'd like to be able to control their width span from position with 0 px
Here is an image of the resulting HTML:
If you look the blue boxes are lined up far to the right
Here is my HTML:
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td width="1%"><img class="avatar" src="/avatar/35274"/></td>
<td>Traveler<br/>posted on 15 May, 2008</td>
<td align="right" style="padding-right:15px">Joined 2 years ago<br/>12 reviews and 49 comments posted</td>
</tr>
<tr class="reviewuserdata">
<td style="width:100%" colspan="3">
<table cellpadding="0" cellspacing="0" class="reviewchart">
<tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
<tr>
<td>
<dl>
<dt><span>QUALITY OF THE DANCERS</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>PRIVATE DANCES, VALUE FOR MONEY</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>OVERALL HOSPITALITY</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>GUEST TO DANCER RATIO</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>VARIETY OF DANCERS</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>VALUE FOR MONEY, COVER CHARGE</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>VALUE FOR MONEY, DRINKS</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>VALUE FOR MONEY, FOOD</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>OVERALL ATMOSPHERE</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
<dt><span>SOUND SYSTEM AND DJ</span></dt>
<dd><div class="bar"><div style="width:100%"></div></div></dd>
</dl>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And here is my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px;
display: inline-block;
vertical-align: middle;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
vertical-align: top;
}
#reviews table td h2 {
position:relative;
display:inline-block;
white-space:nowrap;
font:24px/24px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
/**padding-top:20px;*/
/**padding-left:20px;*/
}
#reviews table td h2 img.stars {
position:absolute;
margin-left:10px;
display:inline-block;
}
#reviews table td h2 span.rating{
position:absolute;
margin-left:145px;
display:inline-block;
color:#e85a06;
font-weight:bold;
}
table.reviewchart {
position:relative;
display:inline-block;
white-space:nowrap;
border-collapse: collapse;
font:14px/14px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
padding-top:20px;
padding-left:20px;
}
table.reviewchart td.reviewlabel{
/**padding-top:15px;*/
padding-bottom:15px;
}
#reviews.dl {
position:relative;
margin: 15px 15px 15px 15px;
}
#reviews dt {
position:relative;
display:inline-block;
float:left;
width:300px;
/**text-align:right;*/
pointer-events:none;
margin:0px;
padding:3px 0px 2px 0px;
z-index:2;
}
#reviews dd {
position:relative;
display:block;
margin:0px;
padding:3px 0px 2px 0px;
z-index:1
}
#reviews dd .bar {
position:relative;
display:inline-block;
width:150px;
height:15px;
margin:1px 20px -1px 20px;
}
#reviews dd .bar div {
position:absolute;
left:0px;
top:0px;
height:100%;
background-color:#1f73b3;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
}

Answer 1

If you want the blue bars to be positioned right beside the text, like this:
Then one option is to float the dt and dd elements, like this:
#reviews dt {
float: left;
clear: both;
}
#reviews dd {
float: left;
}
If you then want to control the spacing, like this:
Add a fixed width to your dt elements:
#reviews dt {
width: 260px;
}
If you don't want the text labels to wrap onto two lines and it isn't possible for you to know how wide the longest label will be, then I suggest converting your dl into a table and placing the labels and blue bars in separate table cells.

Answer 2

You have a width of 300px set for #reviews dt. If you remove that, they are no longer to the right.