Service name falls below GOV.UK in header when there is whitespace between the two divs

[pds2208]

ISSUE:

The example at: https://design-system.service.gov.uk/components/header/ for the service name example will put the service name underneath the GOV.UK header instead of alongside it. This is because the header code relies on a closing and opening div being on the same line.

EXPECTED BEHAVIOUR:
The header should work correctly regardless of whether a div is on the same line or not.

REPRODUCE:
Open your test page here in Chrome: https://design-system.service.gov.uk/components/header/with-service-name/index.html

Inspect element.
To the left of: govuk-header__container govuk-width-container on the three dots right click and 'edit as HTML'

Go down to this line:

Move the second opening div <div class=... to a new line and click on the page.
The service name moves to the next line.

[NickColley]

Thanks for helping us with this.

I see a few possible solutions:

1. Use floats and clearfix
2. Add comments into the template itself
3. Don't pretty print html
4. Do the font-size trick https://css-tricks.com/fighting-the-space-between-inline-block-elements/#article-header-id-3

It feels like 1. would be the most robust

[pds2208]

Please don't do 2 or 3....