Sorry, that image, even with arrows does not explain your problem.
Normally, without custom CSS, all headings will cause a break at their end.
It is not normal practice to have a <div> within a <h*>. It is possible to use <h1>Heading <img src=….></h1> to keep an image next to a heading, but of course, normal width limitations will apply.
But this seems more like an HTML question rather than a theme question. I would suggest searching the web for how to get <h*> elements to layout how you want.