@@Gudrun

Ich habe jetzt im Beispiel

dem h1 display:inline; verpasst. Jetzt steht bei schmalen viewports die Überschrift wie gewünscht unter dem Bild, bei breitem viewport neben dem Bild und Text aber leider nicht vertikal zentriert. Wie kriege ich das noch hin, ohne eine absolute Höhenposition anzugeben?

Mit Flexbox. ☞ Beispiel

Ich bin da mal auf CodePen umgezogen; ich hasse JSFiddle wie die Pest.

Das Mark-up etwas aufgeräumt:

• Der äußere Container ist header, nicht div. Die Sprachangabe lang="de" ist dort, weil’s in CodePen das äußerste Element ist, wo man im HTML-Editor rankommt. Bei dir sollte die Sprachangabe natürlich am Wurzelelement html sein.
• Den Link zur englischen Version hast du völlig richtig in Englisch beschriftet. Der Sprachwechsel sollte aber auch angegeben sein, d.h. lang="en" am a-Element.
• Es macht für Screenreader-Nutzer keinen Sinn, zweimal „English version“ vorgelesen zu bekommen. Das Bild braucht in diesem Fall keinen Alternativtext, also alt="". (Das alt-Attribut muss aber vorhanden sein, sonst würde der Dateiname angesagt werden.)
• Apropos Bild: das wird bei dir kein Löwe sein. Auch nicht drei Löwen. Ich hoffe, es ist auch keine Flagge.
• Das div ums img kann weg, ebenso die spans um „English version“.

Zum CSS:

• header ist eine Flexbox. Durch flex-wrap: wrap rutscht die Überschrift runter, wenn der Viewport so schmal ist, dass sie nicht daneben passt.
• Darin das a-Element ist wiederum eine Flexbox. Bei beiden Flexboxen sorgt align-items: center für die vertikale Zentrierung.

🖖 Live long and prosper