Inline-block vertical-align

by kmouse

HTML

With text
<div style="padding: 8px 16px; background-color: green" class="box">
     <span>BASELINE</span>
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>
without text (the reference is the same)
<div style="padding: 8px 16px; background-color: green" class="box">
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>

CSS

.box {
  background:linear-gradient(red,red) 0 22px/100% 1px no-repeat;
}

.box > * {
  outline:1px solid;
}

span {
  background:yellow;
}