Eléments de bloc en-ligne au sommet du conteneur

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        color: #ffffff;
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        -webkit-align-items: flex-start;
      }
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span id="box-one" class="normal">Bleu</span>
      <strong id="box-two" class="normal">Vert</strong>
      <span id="box-three" class="normal">Gris</span>
      <span id="box-four" class="big">
        La dernière div s'aligne verticalement sur la dernière ligne de texte de son contenu. Comment aligner le haut de toutes les divs colorées.
      </span>
    </div>
  </body>
</html>