Text with different sizes on same line, how to align smaller text horizontally central with bigger text?

Question

As demonstrated in the above image (please take no notice of the fact the Dasboard text is abhorrently large - I only made it that size for this example), I want the text that says "Admin Control Panel" to be aligned horizontally middle with where the Dashboard text is, online with the red arrow.

The code I have for both these pieces of text are:

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>

The CSS code is:

#content-breadcrumb {
  font-family: 'Varela Round', sans-serif
  font-size: 16px;
}

#content-breadcrumb #active {
  font-size: 200px;
  color: #4F95C4;
}

Note that I have tried using vertical align and setting line height to no avail. Thanks for any help that you can offer!

Answer 1

You can use flex box and align-items to accomplish this:

(PS: your closing div and span tags are missing the right caret)

#content-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
  
#active {
    font-size: 2rem;
}
  

<div id="content-breadcrumb">
  Admin Control Panel &raquo;
    <span id="active">
      Dashboard
    </span>
</div>