JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<table id="maintbl">
    <tr>
        <td>
            <table>
                <tr>
                    <td class="left">Title</td>
                    <td class="middle"></td>
                    <td class="right">10000</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td class="left">Title long</td>
                    <td class="middle"></td>
                    <td class="right">5000</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table id="truetbl">
    <tr>
        <td class="sleft"><span class="lined">Title</span></td>
        <td class="sright">10000</td>
    </tr>
    <tr>
        <td class="sleft"><span class="lined">Title long</span></td>
        <td class="sright">5000</td>
    </tr>
    <tr>
        <td class="sleft"><span class="lined">Very very long title with big number</span></td>
        <td class="sright">99999999999</td>
    </tr> 
</table>

CSS

.left {
    padding: 0 10px;
    white-space: nowrap;
}
.middle {
    width: 100%;
    background: transparent url(http://img4.imageshack.us/img4/2413/linean.png) 0 50%  repeat-x;
}
.right {
    width: 80px;
    min-width: 80px;
    padding-left: 10px;
}
#maintbl {
    width: 100%;
}
#maintbl > td {
    display: block;
}

#truetbl {
    margin-top: 30px;
    width: 100%;
} 
.sleft {
    width: 100%;
    padding: 0 10px;  
    overflow: hidden;
}
.sright {
    padding: 0 10px;
}
.lined {
    position: relative;
}
.lined:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 9999px;/*can't find better solution*/
    left: 100%;
    margin-left: 10px;
    top: 0;
    background: transparent url(http://img4.imageshack.us/img4/2413/linean.png) 0 50%  repeat-x;  
}