Chart table

<div class="container" style="padding: 2rem">
    <div class="chart-table simple-table--responsive js-top-table" id="top-table" aria-live="polite" role="grid">
        <div role="row" class="simple-table__header">
            <div role="columnheader" class="simple-table__header-cell cell--40">Name</div>
            <div role="columnheader" class="simple-table__header-cell cell--20 t-right-aligned">Total raised</div>
            <div role="columnheader" class="simple-table__header-cell cell--40"></div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">1. <a href="#">JONES, DOUG</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$44,333,036.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="44333036" data-party="DEM" style="width: 100%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">2. <a href="#">WARREN, ELIZABETH</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$14,586,587.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="14586587" data-party="DEM" style="width: 32.9023%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">3. <a href="#">MOORE, ROY JUDGE</a> [R]</div>
            <div class="simple-table__cell t-right-aligned">$12,515,194.78</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="12515194.78" data-party="REP" style="width: 28.23%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">4. <a href="#">GILLIBRAND, KIRSTEN ELIZABETH</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$12,088,703.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="12088703" data-party="DEM" style="width: 27.2679%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">5. <a href="#">MCCASKILL, CLAIRE</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$11,870,193.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="11870193" data-party="DEM" style="width: 26.7751%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">6. <a href="#">STRANGE, LUTHER J III</a> [R]</div>
            <div class="simple-table__cell t-right-aligned">$10,521,922.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="10521922" data-party="REP" style="width: 23.7338%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">7. <a href="#">BROWN, SHERROD</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$10,249,050.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="10249050" data-party="DEM" style="width: 23.1183%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">8. <a href="#">CASEY, ROBERT P JR</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$10,190,685.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="10190685" data-party="DEM" style="width: 22.9867%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">9. <a href="#">BALDWIN, TAMMY</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$9,964,223.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="9964223" data-party="DEM" style="width: 22.4758%;"></div>
                </div>
            </div>
        </div>
        <div role="row" class="simple-table__row js-top-row">
            <div class="simple-table__cell">10. <a href="#">KAINE, TIMOTHY MICHAEL</a> [D]</div>
            <div class="simple-table__cell t-right-aligned">$8,849,425.00</div>
            <div class="simple-table__cell">
                <div class="bar-container">
                    <div class="value-bar" data-value="8849425" data-party="DEM" style="width: 19.9612%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="results-info">
        <button class="js-previous button button--standard button--previous is-disabled"><span class="u-visually-hidden">Previous page</span></button>
        <button class="js-next button button--standard button--next"><span class="u-visually-hidden">Next page</span></button>
        <div class="u-float-right t-sans">
            Showing <span class="js-page-info">1-10 of 167</span> entries
        </div>
    </div>

</div>