Add two lines of text next to logo in Header

I want to add two lines of text beside my logo with different styles. Is this possible at all? Sorry, I'm very new to custom coding. 

harp-octahedron-kt7y.squarespace.com

Password: Potato

This is what I have, but I want the smaller line of text ("Graphic Designer") under the larger line ("Name Here"), not under the logo. 

.header-title-logo a:after {
    content: "Name Here";
    text-transform: uppercase;
    display: block;
    color: #8C8C8C;
    font-size: 24px;}

.header-title:after{content:"Graphic Designer"; color:grey; font-size:.9rem;}

.header-title-logo a {
    display: flex;
    align-items: center;}

This is Amazing! Thank-you so much. 

An alternative would be to design the logo with title and subtitle in a vector application, export it as SVG and include it in the header. I have had good experiences with this, because the SVG is 100% sharp and scalable like an image (thus also responsive). 
When exporting as SVG you only have to take care that the fonts are converted to paths.