SVG img inline with a multi line text "block" - html

Question

My question is principally similar to this one: SVG img on the same line of text in inline-block container
I have a SVG image, which I want to build into the text, which "displaces" the text from the left side. The text is at least two lines long and it's a <h1> if it matters.
What I've tried to far:
Set the height and/or width just like in that question
Wrapping it in a paragraph (<p>)
Wrapping it in a div with a specified width and/or height
According to https://stackoverflow.com/a/64892423 I tried to add justify-self: start; - has no effect as well...
How do I solve this primitive problem? Help is appreciated.
<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid;">
<img src="graphics/filenamehere.svg" style=" display:inline-flex; height:3rem;" />
</div>
<h1>Lorem Ipsum Text here</h1>
</p>
UPDATE
Minimal reproducable example:
/* Add a random picture */
var img = document.createElement('img');
img.src = 'https://unsplash.it/200/300/?random';
document.body.appendChild(img);
/* Add some lorem ipsum text next to the picture */
var lorem = document.createElement('div');
lorem.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor.';
document.body.appendChild(lorem);
/* Make the picture sit on the left side of the text inline with the text */
img.style.float = 'left';
/* Make the text a h1 header */
lorem.style.fontSize = '1.5em';
lorem.style.fontWeight = 'bold';
This works, but not in my code, which uses a h1 tag...
UPDATE 2
My not properly working code:
.company-content {
width: 79%;
display: inline-grid;
/*margin-left: 75px;*/
}
<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>

Answer 1

Use this code for image and text same line for your requirement.
<div class=company-content>
<p>
<div style="width:60%; height:10%; display:flex; align-items: center; justify-content: center;
margin: 0 auto;">
<img src="graphics/filenamehere.svg" />
<h1 style="margin: 0;">Lorem Ipsum Text here</h1>
</div>
</p>
</div>