Possitioning an image next to two different text elements - html

Question

I am trying to make a header bar on my HTML page that has a h1 and h2 element but then I want an image to appear to the right of both of them.
What ever i try the image appears below the other two, i have tried display:inline-block; but that didn't seem to work.
Any ideas how i do it?
.headerBar {}
.headerBar h1 {
float: left;
width: 400px;
line-height: 0;
}
.headerBar h2 {
width: 400px;
line-height: 1;
}
.headerBar img {
width: 40px;
border-radius: 50px;
}
<div class="headerBar">
<h1>My Name</h1>
<h2>Welcome</h2>
<img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" />
<br>
</div>

Answer 1

You can wrap your headings in wrapper and make .headerBar flex, for more details see CSS part of Code Snippet.
.headerBar {
display: flex; /* make main container flex */
flex-direction: row; /* this will make container in one row */
align-items: flex-start; /* vertical align content to top */
justify-content: space-between; /* add gap between content */
}
.headerBar h1 {
line-height: 0;
}
.headerBar h2 {
line-height: 1;
}
.headerBar img {
width: 40px;
border-radius: 50px;
}
<div class="headerBar">
<div class="headerWrapper">
<h1>My Name</h1>
<h2>Welcome</h2>
</div>
<img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" />
</div>

Answer 2

Flex is a good solution. You also can grid for that. Is it what you want?
.headerBar {
display: grid;
grid-template-columns: auto auto;
width: 100%;
}
.headerBar h1 {
line-height: 0;
}
.headerBar h2 {
line-height: 1;
}
.headerBar .image {
border-radius: 50px;
grid-row: 1 / 3;
grid-column: 2 / 3;
}
<div class="headerBar">
<h1>My Name</h1>
<div class="image"><img src="https://dummyimage.com/300x200/000000/fff" alt="Photo" /></div>
<h2>Welcome</h2>
</div>