JSFiddle - React, Tailwind, and code Playground

by user645715

HTML

<table>
    <tr>
        <td>50%</td>
        <td>
            <svg width="200px" height="24px">
                <rect x=0 y=0 width="200px" height="24px" fill="#22A"/>
            </svg>
        </td>
    </tr>
    <tr>
        <td>30%</td>
        <td>
            <svg width="200px" height="24px">
                <rect x=0 y=0 width="120px" height="24px" fill="#22A"/>
            </svg>
        </td>
    </tr>
    <tr>
        <td>20%</td>
        <td>
            <svg width="200px" height="24px">
                <rect x=0 y=0 width="80px" height="24px" fill="#22A"/>
            </svg>
        </td>
    </tr>
</table>

CSS

table {
    border-spacing: 0px
}

td {
    padding: 0
}

svg {
        display:block;
    padding-bottom:5px;

}