You can solve this in simpe/basic CSS (Flex power is “to much” for this case)
step zero: change “link-block” to “block” (inline block will push the text to the row or the logo) + put the H + img in the same parent (some wrapper - “link-block” for example)
- Change flex-container to block.
- img as inline block (ok in your code)
- Change h1 (block element) to inline block (now the icon and the text will be in the same line).
- Add padding-left for H1 (add space between the img and the H)
Thats it. Now if you want to align the icon and the text - change the img to relative and add 2-3px top or bottom.
Her you get more ideas (or google it):
Way 2 (flex)
If you want to align flex verticaly - change “link block (inside link-block the img+header)” to “flex” than add horzinital align center. Important: remember to remove from “sub-header” any top margin/padding (add margin/padding to the parent)