Javascript CSS水平条形图-管理宽度

我有一个网站，显示不同的水平条形图与不同的左，右百分比

下面是我的意思的截图：

一切都很好，直到我遇到不相称的酒吧宽度：

所以，在这里寻找一些建议。在这种情况下，您建议如何处理宽度，以便在保持两条线之间一定程度的相对比例的同时，完全显示真正较低的百分比（如1%）？我试过用像素宽度填充，加/减缓冲区宽度%，但没有什么让我满意的

以下是我当前的HTML/CSS：

HTML:

---

​

我可能能够使用jQuery插件或Twitter引导进度条，因为我只处理两个值：。但是，您必须查看他们如何处理文本，这是导致问题的原因。您需要将文本放在图表的中心吗？您始终可以将其强制到边缘：

<div class="graph-outer">
    <div class="inner-left-cap"></div>
    <div class="inner-left-bar">1%</div>
    <div class="inner-right-bar">99%</div>
    <div class="inner-right-cap"></div>
</div>

.graph-outer {
    background: black;
    height: 20px;
    width: 150px;   
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
}

.inner-left-cap {
    background: orange;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 1%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 1%;
    height: 100%;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 98%;
    height: 100%;
    text-align: center;
    float: left;
}