JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th class="price">Price</th>
        <th class="tiny"><div class="compare-rounder">&nbsp;</div></th>
        <th>Product</th>
    </thead>
    <tbody>
        <tr>
            <td>$4000</td>
            <td>&nbsp;</td>
            <td>for this</td>
        </tr>
    </tbody>
</table>
<br>
I want the pink DIV to appear behind the third column and extend underneath "For this".
<br>
<br>
<table>
    <thead>
        <th class="price">Price</th>
        <th class="tiny"><div class="compare-rounder">&nbsp;</div></th>
        <th>Product</th>
    </thead>
    <tbody>
        <tr>
            <td>$4000</td>
            <td>&nbsp;</td>
            <td> For this?</td>
        </tr>
    </tbody>
</table>

CSS

table,
table td,
table th
{
    border: 1px #000 solid;
}

.tiny
{
    width: 50px;
    max-width: 50px;
}

.price
{
    width: 50px;
}

.compare-rounder
{
    background-color: #f0f; /*bright pink*/
    border: 1px #ccc solid !important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    position: relative;
    top: -10px;
    left: 20px;
    height: 160px; /*fiddle with this, see what I mean*/
    width: 110px;
    z-index: -100;
    margin: 0;
    padding: 0;
}