HTML
<article class="pa3 pa5-ns" data-name="slab-stat-small">
<h3 class="f6 ttu tracked">Today</h3>
<div class="cf">
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
<dd class="f6 fw4 ml0">Closed Issues</dd>
<dd class="f3 fw6 ml0">1,024</dd>
</dl>
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
<dd class="f6 fw4 ml0">Open Issues</dd>
<dd class="f3 fw6 ml0">993</dd>
</dl>
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
<dd class="f6 fw4 ml0">Next Release</dd>
<dd class="f3 fw6 ml0">10-22</dd>
</dl>
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
<dd class="f6 fw4 ml0">Days Left</dd>
<dd class="f3 fw6 ml0">4</dd>
</dl>
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
<dd class="f6 fw4 ml0">Favorite Cat</dd>
<dd class="f3 fw6 ml0">All of Them</dd>
</dl>
<dl class="fl fn-l w-50 dib-l w-auto-l lh-title">
<dd class="f6 fw4 ml0">App Downloads</dd>
<dd class="f3 fw6 ml0">1,200</dd>
</dl>
</div>
</article>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.fw4 {
font-weight: 400;
}
.fw6 {
font-weight: 600;
}
.tracked {
letter-spacing: .1em;
}
.lh-title {
line-height: 1.25;
}
.w-50 {
width: 50%;
}
.pa3 {
padding: 1rem;
}
.ml0 {
margin-left: 0;
}
.ttu {
text-transform: uppercase;
}
.f3 {
font-size: 1.5rem;
}
.f6 {
font-size: .875rem;
}
@media screen and (min-width: 30em) {
.pa5-ns {
padding: 4rem;
}
}
@media screen and (min-width: 60em) {
.dib-l {
display: inline-block;
}
.fn-l {
float: none;
}
.w-auto-l {
width: auto;
}
.mr5-l {
margin-right: 4rem;
}
}