JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

dl {
    width: 100%;
}
dt {
    height: 2rem;
    width: 8%;
    margin: 0 auto;
    text-align: center;
    line-height: 2rem;
}
dd {
    width: 46%;
    margin: -2rem;
}
dd:nth-of-type(odd),
dd:nth-of-type(even) div {
    float: left;
}
dd:nth-of-type(even),
dd:nth-of-type(odd) div {
    float: right;
}
.bar {
    color: #fff;
    padding: 4px;
    text-align: center;
    background-color: #FFC94D;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}