¿Cómo alinear verticalmente 2 tamaños diferentes de texto?

Sé que para alinear el texto verticalmente a la mitad de un bloque, estableces la altura de la línea a la misma altura del bloque.

Sin embargo, si tengo una oración con una palabra en el medio, eso es 2em. Si toda la oración tiene una altura de línea igual a la del bloque contenedor, entonces el texto más grande está alineado verticalmente pero el texto más pequeño está en la misma línea de base que el texto más grande.

¿Cómo puedo configurarlo para que ambos tamaños de texto estén alineados verticalmente, de modo que el texto más grande esté en una línea de base más baja que el texto más pequeño?

¿Probar vertical-align:middle;contenedores en línea?

EDITAR: funciona pero todo su texto debe estar en un contenedor en línea, como este:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

La funcionalidad que está viendo es correcta porque el valor predeterminado de "alineación vertical" es la línea de base. Parece que quieres vertical-align:top. Hay otras opciones. Vea aquí en W3Schools .

Editar W3Schools no ha limpiado su acto y aún parece ser una fuente de información de mala calidad (en el mejor de los casos). Ahora uso sitepoint . Desplácese hasta la parte inferior de la página principal de sitepoint para acceder a sus secciones de referencia.

los dos conjuntos de texto deben tener la misma altura de línea fija y el conjunto de alineación vertical

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Sin embargo, técnicamente no puede, si tiene tamaños de texto fijos, puede usar la posición (relativa) para mover el texto más grande hacia abajo y establecer la altura de la línea en el texto más pequeño (supongo que este texto más grande está marcado como tal para que puedas usarlo como selector de CSS)

Puede usar tamaños porcentuales para volver a aplicar los line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Manera fácil - use flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

Una opción es usar una tabla en la que los textos de diferentes tamaños están en sus propias celdas y usar align: middle en cada celda.

No es bonito y no funciona para todas las ocasiones, pero es simple y funciona con cualquier tamaño de texto.

Esto funciona

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>