<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- Reference case for behavior of the 'baseline' value for align-items and align-self. NOTE: For multi-line 'display: block' flex items in the testcase, we use an inline-table here in the reference case, so that we get first-line baseline alignment. (If we used an inline-block instead, that would give us *last-line* baseline alignment.) --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .flexbox { display: block; border: 1px dashed blue; font: 14px sans-serif; } div { display: inline-block; } table { display: inline-table; } .lime { background: lime; } .pink { background: pink; } .aqua { background: aqua; } i { display:inline-block; width:20px; height:2px; background:black; } .ref { -moz-appearance:none; -ms-appearance:none; -webkit-appearance:none; appearance:none; border:none; margin:0; padding:0; border-bottom:2px solid black; width:20px; } </style> </head> <body> <div class="flexbox"> <div class="lime">text</div ><button>btn</button ><label class="pink">label</label ><table cellspacing="0" cellpadding="0" class="aqua"> <label>lab<br/>el</label> </table ><table cellspacing="0" cellpadding="0"> <fieldset>field<br/>set</fieldset> </table ><table cellspacing="0" cellpadding="0"> <fieldset><legend>leg</legend>field<br/>set</fieldset> </table ><table cellspacing="0" cellpadding="0"> <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset> </table> </div> <div class="flexbox" style="font-size:0"><input type="radio" /><input type="checkbox" /><input type="checkbox" class="ref"/></div> </body> </html>