JSFiddle - React, Tailwind, and code Playground

HTML

<dl style="width: 600px">
    <dt>2008</dt>
    <dd><div id="data-one" class="bar" style="width: 5%">&nbsp;</div></dd>
    <dt>2009</dt>
    <dd><div id="data-two" class="bar" style="width: 80%">&nbsp;</div></dd>
    <dt>2010</dt>
    <dd><div id="data-three" class="bar" style="width: 64%">&nbsp;</div></dd>
    <dt>2011</dt>
    <dd><div id="data-four" class="bar" style="width: 30%">&nbsp;</div></dd>
    <dt>2012</dt>
    <dd><div id="data-five" class="bar" style="width: 80%">&nbsp;</div></dd>
    <dt>2013</dt>
    <dd><div id="data-six" class="bar" style="width: 60%">&nbsp;</div></dd>
    </dl>

CSS

dt { float: left; padding: 4px; }

.bar {
margin-bottom: 10px;
color: #fff;
padding: 4px;
text-align: center;
background-color: #FFC94D;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}