Bitte um Hilfe bei css

[Rolf b]

Was hier fehlt, ist dein CSS, weil das das Erscheinungsbild festlegt. Ich würde Dir aber im ersten Schritt ein Markup in dieser Art vorschlagen. Das inline-block ist das wichtigste. Mit Flex geht es natürlich auch, setzt aber modernere Browser voraus.

Vor allem habe ich auf - vermutlich - unnötige Klassen verzichtet und statt dessen etwas längere Selektoren im CSS eingesetzt.

<div class="product-field product-field-type-5">
   <div>Jahrgang</div>
   <div>2011 und 2012</div>
</div>
<div class="product-field product-field-type-5">
   <div>Kategorie</div>
   <div>Rotwein</div>
</div>

div.product-field {
  margin: 1em 1em;
}
div.product-field div {
  display: inline-block;
}
div.product-field div:nth-child(1) {
  display: inline-block;
  width: 6em;
  color: #C00;
}

Ich hätte ja gerne ein semantischeres Markup empfohlen, bin aber selbst etwas ratlos was hier angemessen ist.

• dl/dt/dd, wie MrMurphy meint? Ist das eine Liste von Definitionen?
• label und p? Es ist kein Formular, darum stört mich label
• h1 und p? Überschriften gliedern das Dokument, das hier ist aber keine Gliederung.

Aber dafür gibt's hier kompetentere Kollegen. Die DIV-Lösung oben sieht im Browser jedenfalls so aus wie Du es gern hättest. Passendere Elemente werden sich sicher noch finden.

Rolf