How to create a "complex" header in HTML?

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: