Custom Aligning/Ordering Header items

shop.jonathan-gallagher.com

pw: jonjonjon

Template: Brine

I'm trying to create a combination of Site-Title, Tagline & Social Icon.

Line 1: Site Title

Line 2: Social Icon + TagLine

All aligned top left.

I'm new to CSS, and have only suspicions about how to go about this. I've managed to get the layout I'm after, but without being able to get the social Icon and Tagline to be on the same line. I suspect this is to do with the flex styling, but I'm not really sure.

I've "ordered" the Line 2 elements to be the same "order", but that hasn't helped, or I did it wrong.

Perhaps there's another way. e.g? Header Injections, social icon is always followed by a certain text?

the code I'm using so far:

.ancillary-header-primary-nav-position-top-center.has-primary-nav [data-nc-base="header"] [data-nc-group="top"] [data-nc-container]:first-child {
display: flex;
  flex-direction: column;
  align-items: flex-start;
}   
.tweak-social-icons-style-regular .SocialLinks-link {
    margin: 0px;
}
[data-nc-base="header"] [data-nc-container="top-left"] [data-nc-element="tagline"] {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    -webkit-order: 6;
    order: 6;
}