<!doctype html>
<title>Reference for rendered legend and CSS display rendering</title>
<style>
body { margin: 0; }
div { width: 600px; box-sizing: border-box; background: #ddd; border: 1px solid; }
.padding { padding-left: 5em; }
.margin { margin-left: 5em; }
.cell { display: inline-block; width: 50%; }
.ruby { display: block; }
</style>
<div><span class=cell>table</span><span class=cell>table</span></div>
<div class=padding>table-row-group</div>
<div class=padding>table-header-group</div>
<div class=padding>table-footer-group</div>
<div class=padding>table-row</div>
<div class=margin>table-cell</div>
<div class=padding>table-column-group</div>
<div class=padding>table-column</div>
<div>table-caption</div>
<div>flow</div>
<div>flow-root</div>
<div>run-in</div>
<div>inline</div>
<div>inline-block</div>
<div><span class=cell>inline-table</span><span class=cell>inline-table</span></div>
<div><span class=ruby>ruby</span><span class=ruby>ruby</span></div>
<div>ruby-base</div>
<div>ruby-text</div>
<div>ruby-base-container</div>
<div>ruby-text-container</div>
<div><span class=cell>grid</span><span class=cell>grid</span></div>
<div><span class=cell>inline-grid</span><span class=cell>inline-grid</span></div>
<div><span class=cell>flex</span><span class=cell>flex</span></div>
<div><span class=cell>inline-flex</span><span class=cell>inline-flex</span></div>
