How to have a list, an image and a h1 all in the same line (but aligned differently)

Question

I have an img (logo), a h1 (name of the site) and an ul (nav bar). Currently, the imgand theh1are on the same line (both aligned left) which is what I want. Myulis one line down and i want it next to theh1, aligned right. How can I do that? I've tried display: inline-block;withwidth: auto;` but that didn't work.

HTML:

<header>
    <img src="/images/logo.png" alt="Logo" id="logo">
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="index.html" class="nav-link">Home</a> |</li>
            <li><a href="gallery.html" class="nav-link">Gallery</a> |</li>
            <li><a href="about.html" class="nav-link">About</a></li>
        </ul>
    </nav>
</header>

And the CSS:

h1 {
    display: inline-block;
    width: auto;
}

ul {
    list-style: none;
    display: inline-block;
    width: auto;
}

ul li {
    display: inline;
}

I would really appreciate some help, been stuck at this for too long

Answer 1

You can do that with easily css grid, just add header and nav css classes

header {
  display: grid;
  grid-template-columns: repeat(2, auto) 1fr;
  align-items: center;
}

nav {
  justify-self: end;
}

h1 {
    display: inline-block;
    width: auto;
}

ul {
    list-style: none;
    display: inline-block;
    width: auto;
}

ul li {
    display: inline;
}

<header>
    <img src="/images/logo.png" alt="Logo" id="logo">
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="index.html" class="nav-link">Home</a> |</li>
            <li><a href="gallery.html" class="nav-link">Gallery</a> |</li>
            <li><a href="about.html" class="nav-link">About</a></li>
        </ul>
    </nav>
</header>