How to create a "complex" header in HTML? - html

Question

I wanted to create an header in HTML but I made some mistakes and can't figure out how i do it the right way.
This is how I have tried to do it:
.xyz-logo {
float:left;
width:472px;
}
.headerlayout h1{
position:center;
font-family: Arial, Helvetica, sans-serif ;
font-size: x-large;
width:1920px;
height:200px;
background:lightgrey;
}
<div class="headerlayout">
<img class="xyz-logo" src="C:\Users\..." alt="Logo">
<h1 >This is the title</h1>
</div>
This is a picture of how it should look:

Answer 1

As Paul mentioned, you could use Flexbox or Grid to solve it, but if you want something simple that you can play with, here is a solution using absolute positioning.
just change the top, left, and bottom values to change its positioning. The transform in the title is so it is always centered.
.headerlayout{
position: relative;
width: 100%;
background-color: lightgrey;
height: 200px;
}
.xyz-logo {
position: absolute;
top: 0;
left: 0;
}
.headerlayout h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.something{
position:absolute;
bottom:0%;
left:0%;
}
<div class="headerlayout">
<img class="xyz-logo" src="C:\Users\..." alt="Logo">
<h1>This is the title</h1>
<div class="something">Something that changes</div>
</div >
enter link description here