<!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.bluebg {
      background: #2020F0;
    }
    div.greybg_20 {
      background: #202020;
      color: #FFFFFF;
    }
    div.greybg_40 {
      background: #404040;
    }
    div.greybg_B0 {
      background: #B0B0B0;
    }

    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_B0"><div class="greybg_40 halfheightbox middle">jx</div><div class="greybg_20 halfheightbox baseline">jx</div></div>
  <div class="block bluebg"><div class="greybg_40 halfheightbox middle">jx</div><div class="greybg_20 halfheightbox baseline">jx</div><div class="greybg_40 fullheightbox middle">jx</div></div>
  <div class="block greybg_B0">
    <div class="tinyfont baseline">jx</div>
    <div class="greybg_40 halfheightbox middle">jx</div>
    <div class="greybg_20 halfheightbox baseline">jx</div>
    <div class="greybg_40 fullheightbox middle">jx</div>
    <div class="smallerfont baseline">jx</div>
    <div class="greybg_40 halfheightbox middle">jx</div>
    <div class="greybg_20 halfheightbox baseline">jx</div>
    <div class="greybg_40 fullheightbox middle">jx</div>
  </div>
</body>
</html>