Gráfico em HTML5, CSS3, PHP e MySQL

.largura {
    width: 100%;
}
.esquerda {
    width: 15%;
    height: 30px;
    float: left;
    text-align: right;
    padding-right: 10px;
    font-weight: bold;
}
.direita {
    width: 85%;
    height: 30px;
    float: right;
}
.barras {
    height: 20px;
    color: white;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    padding-left: 5px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 2px 2px 2px #555;
}

 <?php foreach($resultado as $r){ ?>
    <div class="esquerda">
        <div><?php echo $r['mes']; ?></div>
    </div>
    <div class="direita">
        <div class="barras" 
                style="width: <?php echo $r['valor']; ?>%; background-color: <?php echo $r['cor']; ?>;" 
                title="<?php echo $r['valor']; ?>%"
                data-toggle="tooltip" 
                data-placement="top"><?php echo $r['valor']; ?>%
        </div>
    </div>
<?php } ?>