How do I align two divs next to each other rather than one on top of the other?

I would like to have the div "descriptionShort" directly to the right of "conditions", and top aligned with it. Please correct either the hTML or CSS, or both, to make that happen.  As it is now, "descriptionShort" is coming in below "conditions", and left-aligned.

Also, in "descriiptionShort", is it possible to have a line height 22px between the first lines 1 and 2, and a height of 14px for the other 3 lines?

Thanks!
John

HTML CODE:
      <div id="conditions">Condition:<br />
          Product(s): 
      </div>     
      <div id="descriptionShort">New<br />
      1 White JBL Radial High-Performance Loudspeaker Dock for iPod JBLRADIALWHT </div>
        
CSS CODE:
#conditions {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin-top: 40px;
	float: none;
	padding-top: 0px;
	width: 70px;
	height: 50px;
	color: #333333;
}
#descriptionShort {
	font-family: "Gill Sans MT";
	font-size: 14px;
	margin-top: 0px;
	float: left;
	padding-top: 0px;
	width: 250px;
	height: 50px;
	color: #333333;
}

Select allOpen in new window