Der relevante Teil ist alles ab der .character-Klasse.
In dieser wird definiert, dass
- die Breite 100% ist (kann btw. weggelassen werden
)
- display auf flex gesetzt wird
- und ein margin-bottom von 5 px, dient dazu, dass der Abstand zu den einzelnen Charaktere höher ist
.character > * spricht jedes Kindelement innerhalb von .character an, unmittelbar danach, also nur die erste Ebene.
Diese gibt flex: 1; an und sagt aus, dass alle Kinderelemente die höchstmögliche Breite verwenden, also jeweils 1/3 der Breite, da es ja drei Elemente sind (Text, Button und Button).
.character > *:first-child spricht das erste der Kinderelemente an und sagt aus, dass die Mindestbreite bei 260px liegen soll. Ist zwar nicht notwendig, aber von deinem Bild ausgesehen, ist die erste Spalte breiter als die beiden anderen.
Das ganze ist natürlich nicht responsive, sollte der Bildschirm des Spielers kleiner sein, als seine Hoden, dann schieben sich die Elemente ineinander bzw. aus der Box heraus.
Hier ist ein Guide zu display: flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/