CSS question: Display date label and field inline

I would like the label and field for a date item on a custom form (ie. not CCK) to display inline but I can't get the field box to move up next to the label.

Firebug output is as follows:

<div class="container-inline-date date-clear-block">
<div id="edit-step1-date-1-wrapper" class="form-item">
<label for="edit-step1-date-1">
Date:
<span class="form-required" title="This field is required.">*</span>
</label>
<div id="edit-step1-date-1-datepicker-popup-0-wrapper" class="form-item">
<input id="edit-step1-date-1-datepicker-popup-0" class="form-text" type="text" value="" size="20" name="step1_date[date]" maxlength="30"/>
<div class="description"> Format: 31/08/2008</div>
</div>
</div>
</div>

My CSS bits and pieces here:

/* Hides the description text on the date pop up */ 
  .container-inline-date .description {
  display:none;
  }	
    
  .container-inline-date #edit-step1-date-1-wrapper 
  {
    border: solid 1px #000;
    display:inline;
  }
  
  .container-inline-date #edit-step1-date-1-datepicker-popup-0-wrapper
  {
    border: solid 1px #000;
    display: inline;
  }

And from the date module's CSS file

.date-clear-block {
display:inline-block;
}

.container-inline-date {
clear:both;
display:inline-block;
margin-right:0.5em;
vertical-align:top;
width:auto;
}

Thanks in advance.