How to overlay site title over logo

Hello! How can I overlay my site title (set in Customize > Site Identity) so that it overlays (floats over?) my logo (also set in Customize > Site Identity), like in this theme (see here and here).

To imitate the logo being stretched to full-width like in the theme linked above, I have removed logo width (i.e. the logo width field is blank in Customize > Site Identity > Logo Width) and added this CSS:

#masthead > div {
padding: 0px;
}
.site-logo,
.site-logo img {
    width: 100%;
}

This displays perfectly when the site title is hidden (via Customize > Site Identity > Hide site title), but when my site title is displayed, it pushes the logo to the side. I tried .site-branding {position: absolute;} which works to overlay the site title over the logo, but then logo no longer stretches to be full-width, and I haven't been able to fix that, despite my efforts!

UPDATE: I think I finally figured it out! Here's the full CSS that looks like it does the trick:

#masthead > div {
padding: 0px;
}

.site-logo,
.site-logo img, 
.site-branding-container {
    width: 100%;
}

.site-branding-container .site-logo {
margin: 0px;
}