Solved!
I used Firefox Developer Edition tools to find the relevant css code in a working theme. I copy/pasted this piece of code into the styles.css file of the theme of my choice and adjusted the class-names (single dash instead of double-dash and double-underscore).
To tidy up I should make a subtheme with my adjustments and leave the theme as it is.
I made even a little improvement to the original code: label will be aligned to left of the column and content to the right (I am using Display Suite to divide the content into a column view)
.field-label {
font-weight: bold;
}
.field-label-inline .field-label {
float: left; /* LTR */
}
.field-label-inline .field-items {
float: right; /* LTR */
}
.field-label-inline .field-label,
.field-label-inline > .field-item,
.field-label-inline .field-items {
padding-right: 0.5em;
}
[dir="rtl"] .field-label-inline .field-label,
[dir="rtl"] .field-label-inline .field-items {
padding-left: 0.5em;
padding-right: 0;
}
.field-label-inline .field-label::after {
content: ':';
}