Вертикальное выравнивание двух пролетов (разного размера шрифта)

Question

Я пытаюсь, но не могу, чтобы жизнь меня составляла два пролета с разными размерами шрифтов по вертикали. Я попытался использовать вертикальное выравнивание как на обертке div, так и на пролетах, но безрезультатно.

Я рассмотрел Flexbox, но не уверен.

.nav-toggle { 
 
    background-color: #2c3e50; 
 
    color: white; 
 
    vertical-align: middle; 
 
} 
 

 
.nav-toggle:hover { 
 
    color: #d35400; 
 
} 
 

 
.triple-bar { 
 
    font-size: 3em; 
 
    margin: 0 0.25em 0 0.5em; 
 
} 
 

 
.menu-text { 
 
    line-height: 3em; 
 
    vertical-align: middle; 
 
}

<div class="nav-toggle"> 
 
    <span class="triple-bar">&#8801;</span> 
 
    <span class="menu-text">Menu</span> 
 
</div>

Cheers, Финн!

Answer 1

добавить vertical-align: bottom к .triple-bar:

.triple-bar { 
    font-size: 3em; 
    margin: 0 0.25em 0 0.5em; 
    vertical-align: bottom; 
} 

FIDDLE