Emulate nested <img> in <h1> without actually nesting - html

Question

I've got to fix a page that has an href image in the h1 tag, like so:
<h1>Header text <img src="image.png"></h1>
and the page looks fine as is. However, having a link in the h1 tag is doing bad things to my SEO, so I need to separate them. Problem is, when I take the two apart:
<h1>Header text</h1><img src="image.png">
It puts the logo below the header, pushing all of the other containers down and breaking the layout of the page completely. What I want to do is use CSS to make the two elements behave like they're nested without actually needing to be.

Answer 1

You can use float:left; or display:inline-block; to your h1 tag so that image and header text would be in same line:
h1 {
float: left;/*prefer to use inline-block though*/
}
You may also be interested with the following structure for more SEO tuning:
<hgroup>
<h1>Header text</h1>
<h1><img src="image.png"></h1>
</hgroup>

Answer 2

The answer Bhojendra Nepal is good or you could put them in two divs a right div and left div
Example here I have center, right, left:
#wrapper {
margin-right: 200px;
background-color: transparent;
background-image:
linear-gradient(
to right,
lightblue, blue, lightblue, #0008ED, lightblue
);
border-radius: 15px 15px 15px 15px;
}
#left {
float: left;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
}
#center{
float: left;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
}
#right{
float: right;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
margin-left: -60%;
}
<div id="wrapper">
<div id="left"> text</div>
<div id="center"> text</div>
<div id="right">text</div>
<div id="cleared"></div>
</div>