<!DOCTYPE html>
<style>
.block {
   background-color: green;
   width: 120px;
   margin-bottom: 20px;
   color: transparent;
   font-family: Ahem;
   font-size: 20px;
}

.aligned-box {
  display: inline-block;
  background-color: green;
  width: 50px;
  height: 50px;
}

.non-lineBox-relative {
   vertical-align: baseline;
   width: 50px;
   height: 20px;
}

.bottom {
  vertical-align: bottom;

  width: 50px;
  height: 50px;
}

.top {
  vertical-align: top;
}
</style>
<!-- The non-line-box relative inline level boxes should not stick out of their parent block box -->
<div class=block>X<div class="aligned-box non-lineBox-relative">X</div><div class="aligned-box bottom"></div></div>
<div class=block>X<div class="aligned-box non-lineBox-relative" style="height: 100px;">X</div><div class="aligned-box bottom"></div></div>
<div class=block>X<div class="aligned-box non-lineBox-relative" style="padding-bottom: 100px; height: 100px;">X</div><div class="aligned-box bottom"></div></div>
<div class=block>X<div class="aligned-box non-lineBox-relative">X</div><div class="aligned-box bottom"></div></div>
<div class=block>X<div class="aligned-box non-lineBox-relative" style="height: 30px; vertical-align: middle">X</div><div class="aligned-box bottom"></div></div>
<div class=block>X<div class="aligned-box non-lineBox-relative">X</div><div class="aligned-box top"></div></div>