flexbox vertical alinee la parte superior del niño, centre otra

Tengo el siguiente marcado:

.row {
  display: flex;
  align-items: stretch;
  
  margin: -16px;
  background: #ddd;
}

.row .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  flex: 1;
  
  margin: 16px;
  background: #fff;
}

.header, .content, .footer {
  padding: 16px;
  
  background: red;
}
<div class="row">
    <div class="col">
        <div class="header">Header #1</div>
        <div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
        <div class="footer">Footer</div>
    </div>

    <div class="col">
        <div class="header">Header #2</div>
        <div class="content">Lorem Ipsum<br />Dolor</div>
    </div>
</div>

Desafortunadamente, el segundo encabezado no está alineado verticalmente con la parte superior. ¿Hay alguna manera de archivar esto con flexbox? Necesito que el ".header" esté alineado en la parte superior y el ".content" para centrarse en el resto de la caja.

¡Saludos!

Respuestas a la pregunta(2)

Su respuesta a la pregunta