CSS styling issue for replicating logo - css

Question

I'm trying to replicate this design for my logo but struggling with the CSS. So far I have managed to write the code below but am struggling to create the stacked text for growth hacker and entrepreneur. If you have any guidance it would be much appreciated.
<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">Elliott Davidson | <span class="logo-growth-hacker">Growth Hacker</span><br><span class="logo-entrepreneur">Entrepreneur</span></a>
.navbar-brand
font-weight: bold
font-size: 1rem
text-transform: uppercase
color: $light-grey
padding: 30px 30px 30px 0px
.navbar-default .navbar-brand
color: $light-grey
a.navbar-brand.navbar-brand-fix
span.logo-growth-hacker
font-weight: 200
font-size: 0.5em
text-transform: none
vertical-align: text-top
span.logo-entrepreneur
font-weight: 200
font-size: 0.5em
text-transform: none
margin-top: -18px
float: inherit
margin-left: 182px
padding-top: 5px

Answer 1

Here's how I would do it. Create a couple of flex columns using the row layout and style accordingly.
a {
display: inline-flex;
align-items: center;
background: linear-gradient(to right, #666, #666 50%, #444 50%, #444);
color: white;
padding: 1rem;
text-decoration: none;
font-size: 1.25rem;
}
.col {
border-left: 1px solid white;
padding: 0 0 0 1rem;
margin: 0 0 0 1rem;
font-size: .6rem;
}
a:hover .col { border-color: red; }
<a class="navbar-brand navbar-brand-fix" href="<?php echo site_url('/') ?>">
<span class="name">Elliott Davidson</span>
<span class="col">
Growth Hacker<br>
Entrepreneur
</span>
</a>

Answer 2

Hopefully this may get you started :-)
.logo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.logo > * {
flex: 0 0 auto;
}
.title {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.title > * {
flex: 0 0 auto;
}
<div class="logo">
<div class="name">
Elliott Davidson
</div>
<div class="title">
<div class="funText">
Growth Hacker
</div>
<div class="position">
Entrepreneur
</div>
</div>
</div>