Reinhard: Tabellenähnliches Design mit Flexbox

Beitrag lesen

Hey,

ich habe gerade ein paar Schwierigkeiten mit Flexbox: ich habe 4 Zeilen mit jeweils 2 Spalten.
Ungefähr so (nur dass die rechte Spalte zentriert sein soll):

| titel: | hier geht es um dies und das | autor: | ____________________________ich | seiten: | _________________________________1 | wörter: | ____________________________200

In HTML folgende Struktur:

<div class="main-container">
  <div class="container">
    <span class="titel"><span class="left">titel:</span><span class="right">hier geht es um dies und das</span></span>
    <span class="autor"><span class="left">autor:</span><span class="right">ich</span></span>
    <span class="seiten"><span class="left">seiten:</span><span class="right">1</span></span>
    <span class="woerter"><span class="left">wörter:</span><span class="right">200</span></span>
  </div>
</div>

Das erste div mit der Klasse main-container hat eine fixe Breite von 300px. Das zweite div mit der Klasse container soll horizontal mittig davon platziert werden.
In jenem zweiten div soll nun dieses Tabellendesign zu sehen sein; jeweils der 1. Buchstabe der span's mit der Klasse left untereinander. Dagegen sollen die Wörter der Klasse right zentriert untereinander stehen. Dazwischen ein wenig Freiraum.
Hinzu kommt, dass das Wort "titel" vertikal zentriert werden sollte, falls in der rechten Spalte (selbe Zeile) ein zu langer Titel steht und es somit zu einem Zeilenumbruch kommt. Bei den anderen Zeilen ist sicher, dass die rechte Spalte nicht zu lang wird.

Ich habe schon ziemlich lange herum probiert; haufenweise CSS-Eigenschaften in den Suppentopf geschmissen, umgerührt und geschaut ob es passt. Bestimmt ist die Lösung simpel, nur scheint sie sich vor mir zu verstecken. Ich hoffe ihr könnt mir da weiterhelfen.

Reinhard