dl to flex tabs

dabblet.css

/**
 * dl to flex tabs
 */

dl {display:flex; flex-wrap: wrap; justify-content: space-around; align-items:center;}
dt {order:1; flex-grow:1; }
dt:first-child { background:yellow;}
dd {order:2; width:100%; flex-basis:auto; background:aliceblue;}

dabblet.html

<dl>
<dt>Original HTML</dt>
<dd><pre class="prettyprint lang-html linenums original_html selected">&lt;div&gt;
  &lt;a href="http://www.bbc.co.uk/programmes/b006qykl"&gt;In Our Time&lt;/a&gt;,
  &lt;a href="http://www.bbc.co.uk/programmes/b03ggc19"&gt;Ordinary Language Philosophy&lt;/a&gt;, episode 604,
   broadcast on BBC Radio 4 at 09:00, 7th of November 2013, available online from 09:45 on the same day.
&lt;/div&gt;</pre>
</dd>
<dt>Microformats 2</dt>
<dd><pre class="prettyprint lang-html linenums microformats ">
&lt;div class="h-schema-RadioSeries"&gt;
  &lt;a class="p-name" href="http://www.bbc.co.uk/programmes/b006qykl"&gt;In Our Time&lt;/a&gt;,
  &lt;div class="p-schema-episode h-schema-RadioEpisode"&gt;
    &lt;a class="p-name" href="http://www.bbc.co.uk/programmes/b03ggc19"&gt;Ordinary Language Philosophy&lt;/a&gt;,
    episode &lt;span class="p-schema-position"&gt;604&lt;/span&gt;,
    broadcast on     
    &lt;span class="p-schema-publication h-schema-BroadcastEvent"&gt;
      &lt;a class="p-schema-publishedOn h-schema-BroadcastService" href="http://bbc.co.uk/radio4"&gt;BBC Radio 4&lt;/a&gt;
      at &lt;time class="dt-schema-startDate" datetime="2013-11-07T09:00+0100"&gt;09:00, 7th of November 2013&lt;/time&gt;
    &lt;/span&gt;, available online from     
    &lt;span class="p-schema-publication h-schema-OnDemandEvent"&gt;
      &lt;time class="dt-schema-startDate" datetime="2013-11-07T09:45+0100"&gt;09:45 on the same day&lt;/time&gt;
    &lt;/span&gt;.  
  &lt;/div&gt;
&lt;/div&gt;</pre>
</dd>
<dt>Microformats parsed</dt>
<dd><pre class="prettyprint lang-html linenums microformats-parsed ">{    "items": [{        "type": ["h-schema-RadioSeries"],        "properties": {            "name": ["In Our Time"],            "schema-episode": [{                "value": "Ordinary Language Philosophy",                "type": ["h-schema-RadioEpisode"],                "properties": {                    "name": ["Ordinary Language Philosophy"],                    "schema-position": ["604"],                    "schema-publication": [{                        "value": "BBC Radio 4\n      at 09:00, 7th of November 2013",                        "type": ["h-schema-BroadcastEvent"],                        "properties": {                            "schema-publishedOn": [{                                "value": "BBC Radio 4",                                "type": ["h-schema-BroadcastService"],                                "properties": {                                    "name": ["BBC Radio 4"],                                    "url": ["http://bbc.co.uk/radio4"]                                }                            }],                            "schema-startDate": ["2013-11-07T09:00+0100"],                            "name": ["BBC Radio 4\n      at 09:00, 7th of November 2013"]                        }                    }, {                        "value": "09:45 on the same day",                        "type": ["h-schema-OnDemandEvent"],                        "properties": {                            "schema-startDate": ["2013-11-07T09:45+0100"],                            "name": ["09:45 on the same day"]                        }                    }],                    "url": ["http://www.bbc.co.uk/programmes/b03ggc19"]                }            }],            "url": ["http://www.bbc.co.uk/programmes/b006qykl"]        }    }],    "rels": {},    "rel-urls": {}}</pre>
</dd>
<dt>Microdata</dt>
<dd><pre class="prettyprint lang-html linenums microdata ">&lt;div itemscope itemtype="http://schema.org/RadioSeries"&gt;  &lt;a itemprop="url" href="http://www.bbc.co.uk/programmes/b006qykl"&gt;   &lt;span itemprop="name"&gt;In Our Time&lt;/span&gt;&lt;/a&gt;,  &lt;div itemprop="episode" itemscope itemtype="http://schema.org/RadioEpisode"&gt;    &lt;a itemprop="url" href="http://www.bbc.co.uk/programmes/b03ggc19"&gt;     &lt;span itemprop="name"&gt;Ordinary Language Philosophy&lt;/span&gt;&lt;/a&gt;,    episode &lt;span itemprop="position"&gt;604&lt;/span&gt;, broadcast on    &lt;div itemprop="publication" itemscope itemtype="http://schema.org/BroadcastEvent"&gt;      &lt;div itemprop="publishedOn" itemscope itemtype="http://schema.org/BroadcastService"&gt;        &lt;a itemprop="url" href="http://www.bbc.co.uk/radio4"&gt;&lt;span itemprop="name"&gt;BBC Radio 4&lt;/span&gt;&lt;/a&gt;      &lt;/div&gt; at      &lt;span itemprop="startDate"        content="2013-11-07T09:00:00+01:00"&gt;09:00, 7th of November 2013&lt;/span&gt;    &lt;/div&gt;,    available online from    &lt;div itemprop="publication" itemscope itemtype="http://schema.org/OnDemandEvent"&gt;      &lt;span itemprop="startDate"       content="2013-11-07T09:45:00+01:00"&gt;09:45 on the same day&lt;/span&gt;.    &lt;/div&gt;  &lt;/div&gt;&lt;/div&gt;</pre></dd>
<dt>RDFa</dt>
<dt>Json-LD</dt>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}