An example where one of the HTML span element is bigger than the rest of the <li> elements.

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #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;
      }
      ul li {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
        The last div vertically aligns to its content's last line of text. 
        How to align the top of all the colored divs.
        </span>
      </li>
    </ul>
  </body>
</html>