Hello!
Basically I am trying to align a picture with text, and it is easy for the desktop version, when everything is on one line.
But when I go smaller resolutions there is a big gap between them.
Here is a codepen that I have made.
This is on one line and it’s perfect as I want it.
And this is on the responsive version.
I want the image to automatically be on the side of the “George” and close to it. Not in the middle of the tex.
Maybe someone knows better what we can do here?
Have you tried closing H1 after the image?
This is an age old conundrum and I still don’t think this is possible unless you actually set the width for the text container at the point the text would break (using media queries ).
The flex box algorithm (and also grid) layout the boxes on the expected content but do not monitor when text wraps as such otherwise the container would reflow awkwardly at every twist and turn when resizing and that would have an enormous impact on all the rest of the page structure in terms of laying out the page.
What may help is of you just align the text to the right so that on small screen you would get text tight to the right side of the image instead.
Otherwise you are stuck with just using a media query at an arbitrary width and forcing the text to break.
e.g.
I’m pleased you said that. I tried having a go in Codepen earlier today, thinking it would be an easy fix with flex. But I was staggered at how difficult it actually was and had to give up in the end.
The h1 boundary doesn’t shrink to fit when the text wraps. Of course adding flex-shrink causes it to wrap unnecessarily.
Would it work if the image was added as a pseudo after: element?
Okey thank you very much, I thought there will be a fix but it is something more complicated as it seems 
I will go with the media queries method, so I will target exactly the point I wont to go side by side and then move the image with margin.
Thanks!
Would it work if the image was added as a pseudo after: element?
It makes no difference as css doesn’t seem to have a way of defining the point where text wraps in respect of its main container.
I tried absolute positioning and all kinds of other things and all fail at the same point.
Im not saying it’s impossible but it certainly seems like it
Sometimes it’s simple if you’re allowed to add something to the html.
In this case a span wrapping the last word together with the image.
Like: https://jsfiddle.net/Erik_J/eyu9caqn/
The HTML:
<div class="wrapper">
<h1>Welcome <span>George! <img src="https://w7.pngwing.com/pngs/545/285/png-transparent-cartoon-sadness-illustration-say-hello-words-phrases-boy-god-sai-baba.png" alt=""></span></h1>
</div>
The CSS:
.wrapper {
display: flex;
justify-content: center;
}
span {
display: inline-block;
}
img {
width: 30px;
vertical-align: middle;
}
Why is a span required?
The text inside the hi tags are already inline and the image itself is inline.
When I’m on the desktop I will try my suggestion in post #1
To attache the image to the word making them a unit that will wrap together until the line is too short and then the span breaks too.
If the span is not allowed and the HTML must stay as is, it’s more complicated and I’ll have to think new.
Is this Kludge acceptable?
<h1 style="line-height: 1; font-size: 3.81rem; background-color:AQUA;"
>
Welcome George!
<img
src="https://w7.pngwing.com/pngs/545/285/png-transparent-cartoon-sadness-illustration-say-hello-words-phrases-boy-god-sai-baba.png"
width="30"
alt="#">
</h1>
Yes tried all of those but they push the lines apart or the image will wrap on its own depending on text length.
If you wanted to stop that happening then placing a span around the last word and the image could stop that by adding white-space:nowrap and display:inline-block;.
However that changes the html from the original which I was trying to avoid
I’m confused, I thought the idea was get rid of the gap.
Perhaps the @nikostzounakos could supply a full working page and explain the problems and the requirements.
It is not easy trying to create solutions for every possible scenario.
The problem seems pretty clear to me. It’s the solution that is looking very hazy. 
I think the Codepen is sufficient to see it, anything more (such as the rest of the page) would be a distraction from the problem elements.
Though I find adding element outlines helpful in visualising problems like this:-
* { outline: 1px red dotted ;}
I think the requirements were clear also.
This is what happens at small screen.
This is what I assumed was required.
Obviously if you treat the image as a word at the end of the line then it will wrap with the line just like normal text and you get the icon at the end of the second line but unless you add the extra span as in my example the image may drop to a third line as is normal behaviour.
e.g.
Of course there are many variables such as screen width and font-size and word length to take into account.
Not so complicated, but the modern styles like flex doesn’t seem to give the rendering I intended:
Untuched HTML
<div class="wrapper">
<h1>Welcome George!</h1>
<img src="https://w7.pngwing.com/pngs/545/285/png-transparent-cartoon-sadness-illustration-say-hello-words-phrases-boy-god-sai-baba.png" alt="">
</div>
CSS
.wrapper {
text-align: center;
}
h1 {
display: inline;
margin-right: -40px; /* something bigger than the image */
padding-right: 40px;
}
img {
display: inline;
width: 30px;
vertical-align: middle;
}
EDIT)
Something is not right with the JsFiddle. Please use the posted code above.
Yes Erik I also tried something like that 
also and although it mostly works it will do this at a certain point.
The image is going to drop first if certain conditions are met.
It may indeed be good enough but the answer I was hoping to find is the automatic resizing of the parent container when text wraps in the 2 column layout as that gives the best display.
I was hoping that some of the new css properties like min and max-content and their variations would suffice (or indeed CSS grid) but the specs make it clear that the container is laid out but then doesn’t keep checking on its width when text inside starts to wrap. Which of course for most layouts is what you want but this edge case has been eluding me for years
So it seems, though in current Firefox that doesn happen:
https://jsfiddle.net/Erik_J/oc5zLp1j/
If I come to think of another way I could try agin, but I haven’t access to more than Firefox and Chromium on this machine.
If possible I think the added span does work, it doesn’t seem to need the nowrap when I tested briefly
No I don’t think it’s actually needed when using the extra span around the last word and the image and using inline-block. I added it just in case in my demo