Definition list with inline pairs

Try this:

dt, dd { float: left }
dt { clear:both }

Add margin-bottom to dt dd if you'd like more space between them..

I tried these answers, finally I end up with this.

Which I simplified to:

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }

Another solution:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}