How can CSS emulate content display with labels in one column and data in the other?

Question

I have set the Manage Display option to make the field labels Inline, given them a fixed width so that all the data is lined up in a column.

.field-label-inline .field-label {
  margin-right: 6px;
  text-align: right;
  width: 110px;
}

The problem is that when the is long, the data it gets positioned below the label rather stay to the right of the label. I want as though it was a table with the right-aligned labels in the first column and the data in the second column.

Can that be accomplished via CSS?

Answer 1

Field content supposed to live inside div.field-items, so you can set "width" or "max-width" properties to div.field-items. Value of width/max-width should be same as or smaller than parent div.field width minus label width.