Hallo,
für dein Vorhaben sind span-Elemente ungeeignet. Dafür bietet sich eher das dl-Element an.
Die beiden div sind überflüssig, außer du hälst uns Informationen vor.
Dadurch wird das HTML auch viel übersichtlicher als deine span-div-Orgie.
<dl class="main-container">
<dt>Titel:</dt>
<dd>Hier geht es um dies und das</dd>
<dt>Autor:</dt>
<dd>Ich</dd>
<dt>Seiten:</dt>
<dd>1</dd>
<dt>Worte:</dt>
<dd>200</dd>
</dl>
Das CSS für Flexbox ist wie flexbox-üblich sehr einfach:
/*Flexbox*/
dl.main-container {
display: flex;
flex-wrap: wrap;
}
.main-container dt {
flex: 1 1 20%;
}
.main-container dd {
flex: 1 1 70%;
}
Vom restlichen CSS ist nur das margin-left: 0 (bzw. margin: 0) für das dd-Element erforderlich, der Rest dient nur der Optik und kann von dir entsprechend angepasst werden. Die 300px Gesamtbreite hattest du ja vorgegeben, die können natürlich auch geändert werden.
/*Restliches CSS*/
dl.main-container {
width: 300px;
padding: 0.5rem;
border: 1px solid black;
margin: 0 auto;
}
.main-container dt {
padding: 0.3rem;
border: 1px solid silver;
}
.main-container dd {
text-align: center;
padding: 0.3rem;
border: 1px solid silver;
margin: 0;
}
Gruss
MrMurphy