<!DOCTYPE html>
<html>
<!--
 | The vertical position of the baseline block after a middle block is
 | too high, sometimes also causing the line box to be too high.
-->
<head>
  <style>
    body {
      font-family: Roboto;
      margin: 0px;
      font-size: 25px;
    }

    div {
      display: inline-block;
    }
    div.block {
      display: block;
    }

    div.greybg_20 {
      background: #202020;
      color: #FFFFFF;
    }
    div.greybg_40 {
      background: #404040;
    }
    div.greybg_C0 {
      background: #C0C0C0;
    }
    div.greybg_D0 {
      background: #D0D0D0;
    }
    div.greybg_E0 {
      background: #E0E0E0;
    }

    div.halfheightbox {
      width : 32px;
      height : 64px;
    }
    div.fullheightbox {
      width : 32px;
      height : 128px;
    }

    div.baseline {
      vertical-align: baseline;
    }
    div.middle {
      vertical-align: middle;
    }

    div.tinyfont {
      font-size: 4px;
    }
    div.smallerfont {
      font-size: 20px;
    }

  </style>
</head>
<body>
  <div class="block greybg_D0"><div class="greybg_40 halfheightbox middle"></div><div class="greybg_20 halfheightbox baseline"></div></div>
  <div class="block greybg_E0"><div class="greybg_40 halfheightbox middle"></div><div class="greybg_20 halfheightbox baseline"></div><div class="greybg_40 fullheightbox middle"></div></div>
  <div class="block greybg_C0">
    <div class="tinyfont baseline">jx</div>
    <div class="greybg_40 halfheightbox middle"></div>
    <div class="greybg_20 halfheightbox baseline"></div>
    <div class="greybg_40 fullheightbox middle"></div>
    <div class="smallerfont baseline">jx</div>
    <div class="greybg_40 halfheightbox middle"></div>
    <div class="greybg_20 halfheightbox baseline"></div>
    <div class="greybg_40 fullheightbox middle"></div>
  </div>
</body>
</html>