How to place two elements (image and text) in a one row - html

Question

Im writing some code using HTML and CSS only. And in header i have 1 image and some text after it. I need to place them in a one row to make it look like a normal header.
I was trying to use display: inline-block but it not worked for some reason
header{
display: inline-block;
width: auto;
}
<header>
<img src="https://picsum.photos/200" height="35" width="35" />
<h1>Learn about your game</h1>
</header>

Answer 1

Using flex
header {
display: flex;
align-items: center
}

Answer 2

.image-text {
display: flex;
align-items: center;
}
.image-text__image {
flex: 0 0 auto;
padding: 1em;
}
.image-text__image img {
display: block;
}
.image-text__text {
flex: 1 1 auto;
padding: 1em;
}
<header>
<div class="image-text">
<div class="image-text__image">
<img src="https://picsum.photos/200" height="35" width="35" />
</div>
<div class="image-text__text">
<h1>Learn about your game</h1>
</div>
</div>
</header>

Answer 3

Use Flexbox:-
header {
display: flex;
align-items: center;
justify-content:center;
}
header h1 {
padding-left:20px;
box-sizing:border-box;
}

Answer 4

header{
display: flex;
width: 90%;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px auto;
background-color: red;
text-align: center;
}
header img,header h1{
display: block;
width: 80%;
margin: 5px auto;
}
</style>
add this to your css