CSS水平条形图 - 管理宽度

Question

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

以下是我的意思截图：

一切都很棒，直到我遇到不成比例的条宽：

所以在这里寻找一些建议。在这种情况下，您如何建议处理宽度，以便可以完全显示真正的低百分比，例如1％，同时保持两个条之间的某种程度的相对比例？我已经尝试使用像素宽度填充，添加/减去缓冲区宽度％，但我还不满意。

这是我当前的HTML / CSS：

HTML：

<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>

CSS：

.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;
}

http://jsfiddle.net/2ZkDz/126/