<!DOCTYPE html>
<!--
 | This shows some vertical align testcases with text and fixes size boxes
-->
<html>
<head>
  <style>
    body {
      font-family: Roboto;
      margin: 0px;
      font-size: 25px;
      color: #FFFFFF;
    }

    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.smallerfont {
      font-size: 20px;
    }

  </style>
</head>
<body>
  <div class="block greybg_B0">
    <div class="smallerfont baseline">jx</div>
    <div class="greybg_20 halfheightbox baseline">gx</div>
  </div>
  <div class="block bluebg">
    <div class="greybg_40 halfheightbox middle">gx</div>
    <div class="greybg_40 fullheightbox middle">gx</div>
  </div>
  <div class="block greybg_B0">
    <div class="smallerfont baseline">jx</div>
    <div class="greybg_20 halfheightbox baseline"></div>
  </div>
  <div class="block bluebg">
    <div class="smallerfont baseline">jx</div>
    <div class="greybg_20 halfheightbox baseline">gx</div>
  </div>
</body>
</html>