JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid clearfix">
    <div class="col50">
        <div id="campaigns" class="height50" data-call="campaigns-table">
            <table class="data-table" style="border: 1px solid red">
                <tbody>
                    <tr>
                        <th colspan="2">Top xxxxxxx (xxxxx, last 7d)</th>
                        <th class="align-right">#</th>
                    </tr>
                    <tr class="row-0 row-even">
                        <td>x:xx:xx:xxxxxx/portal-xxxxxx</td>
                        <td class="width-10pct align-right">-2%</td>
                        <td class="width-20pct align-right">340</td>
                    </tr>
                    <tr class="row-1 row-odd">
                        <td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
                        <td class="width-10pct align-right">-21%</td>
                        <td class="width-20pct align-right">152</td>
                    </tr>
                    <tr class="row-2 row-even">
                        <td>x:xx:de:de/xxxxxxxxx</td>
                        <td class="width-10pct align-right">-39%</td>
                        <td class="width-20pct align-right">114</td>
                    </tr>
                    <tr class="row-3 row-odd">
                        <td><div>x:xx:xx:xxxxxx/portal-xxxxxx.xxxxxxxx_x_xxxxxxxxxxxxxx<div></td>
                        <td class="width-10pct align-right">-13%</td>
                        <td class="width-20pct align-right">80</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col50">
        <div id="referrer" class="height50" data-call="referrer-table">
            <table class="data-table" style="border: 1px solid green">
                <tbody>
                    <tr>
                        <th colspan="2">Top xxxxxxx (xxxxx, last 7d)</th>
                        <th...

CSS

.grid {
    width: 100%;
    max-width: 1280px;
    box-sizing: border-box;
    margin: 0 auto 1em;
    -moz-box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
    -moz-box-sizing: border-box;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
}
.grid .col50 {
    width: 50%;
}
.data-table {
    font-size: 11px;
    width: 100%;
    border: 0;
    border-collapse:collapse;
}
.data-table th, .data-table td {
    border: 0;
    border-collapse: collapse;
    height: 14px;
    padding: 0px 3px;
    margin: 0;
}
.data-table th {
    background: #4f81bd;
    color: #ffffff;
    text-align: left;
}
.data-table .row-odd td {
    background-color: #bccde0;
}
.data-table .row-even td {
    background-color: #d8dfe8;
}
.width-10pct {
    width: 10%
}
.width-20pct {
    width: 20%
}
.width-70pct {
    width: 70%
}
.data-table td {
    color: #000000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
td > div:first-child:last-child {width:25%; max-width:10em; overflow:hidden}