<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- Testcase for behavior of the 'baseline' value for align-items (and align-self, implicitly). This test baseline-aligns a <table>. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> div.flexbox { display: flex; align-items: baseline; border: 1px dashed blue; font: 14px sans-serif; } table { margin: 1px; /* to fix fuzziness from text overlapping table border */ } .lime { background: lime; } .pink { background: pink; } .aqua { background: aqua; } </style> </head> <body> <div class="flexbox"> <div class="lime">text</div> <table class="pink" border="1"> <tr><td>tr1</td></tr> <tr><td>tr2</td></tr> </table> </div> </body> </html>