Split object

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<dl class=split>
    <dt class=split__title>Burger and fries<p>uo</p></dt>
    <dd>&pound;5.99</dd>
        <br/>
    <dt class=split__title>Fillet steak</dt>
    <dd>&pound;19.99</dd>
    <dt class=split__title>Ice cream</dt>
    <dd>&pound;2.99</dd>
</dl>

<ol class=split>
    <li><b class=split__title>1st place<p><b>Kind</b></p> </b>Bob</li>
    <li><b class=split__title>1st place<p><b>Kind</b></p> </b>Bob</li>
    <li><b class=split__title>1st place<p><b>Kind</b></p> </b>Bob</li>
    <li><b class=split__title>2nd place</b> Lilly</li>
    <li><b class=split__title>3rd place</b> Ted</li>
</ol>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_split.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}