Wie findet man die Höhe eines Textes im Flex-Kontainer nur mit CSS zur Ausrichtung heraus?

[MB]

moin,

Code Darstellung:

.cm-header {
  position: relative;
  display: flex;
  flex-flow: row;
}

<!-- Flex Kontainer -->
<span class="cm-header">
  <!-- Flex-Element before: -->
  <!-- Flex-Element Überschrift -->
  <!-- Flex-Element after: -->
</span>

Meine Absicht:

• Ich möchte das Flex-Element .cm-header::after mit text-valign: baseline; auf einer horizontalen Linie zum Flex-Element .cm-header ausrichten.
• Ich möchte mit .cm-header::after ein quadratische Fläche definieren, welches sich zur Text höhe des .cm-header-Element orientiert.

Mein Problem:

• text-valign-Property funzt irgend wie nicht 😕
• Das auslesen von der Text höhe des .cm-headers krige ich nicht auf die kette 😕.

Meine Frage:

• Wie krige ich die dynamische Höhe des Textes im .cm-header-Element raus, sodass ich dann mit der dynamischen höhe des Textes eine quadratische größe des .cm-header::after-Element definieren kann.
• Wie kann man .cm-header::after-Element vertikal zur .cm-header ausrichten wenn nicht durch text-valign: baseline; oder geht das mit Kniffen doch 😃???

Meine provisorische Lösung:
Ich habe eine leider eine fixe Breite in px und eine dynamische Höhe 1em des .cm-header::after-Elementes zur der dazugehörigen .cm-header-Element verwendet. Ich habe mit display: inline-block; des .cm-header::after-Elementes gearbeitet, sodass die vertikale Zentrierung des .cm-header::after-Elementes zum .cm-header-Element einiger Maße ok ist, leider aber nicht zum Text der .cm-header-Element selbst 😕.

Mein Ziel:
Durch die Veränderung der Breite des Viewports ordnen sich die Flex-Elemente über @media in der Reihenfoge anders an.

lgmb