Site Title, Tag Line + Mobile Header Layout

Hi there,

so that site is pure HTML and its using HTML text for that.
Can i see the site you're working on? Then i can advise on the best way to do that.

Thankyou for taking a look.

This is the website that we're working on: https://andrew-wallace-architects.onyx-sites.io/

Ok, so we need to split the site-description into two HTML elements, to do that requires some PHP.
Add this PHP Snippet to your site:

add_filter( 'generate_site_description_output', function(){
    return sprintf(
        '<p class="site-description"%1$s>
            line one of description
        </p>
        <p class="site-description"%1$s>
            line two of description
        </p>
        ',
        'microdata' === generate_get_schema_type() ? ' itemprop="description"' : ''
    )
});

change the two lines to your requirements.

Then add this CSS:

/* inline title and 2 descriptions */
.site-branding {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
}
/* Optional Add some space after title */
.main-title {
    margin-right: 10px;
}
/* Make it wrap on mobile */
@media(max-width: 768px) {
    .site-branding {
        max-width: 300px;
    }
}

Note the last CSS rule, you can adjust the @media(max-width: 768px) to a screen size when you want the description to wrap, and you will need to adjust the max-width: 300px; to force it to wrap.