JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div id='leftColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
        <td>
            <div id='mainContentColumn'><a href="#">Hover me</a></div>
        </td>
        <td>
            <div id='rightColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
    </tr>
</table>

CSS

td {background-color: #ccc; border: solid #fff 1px;
-webkit-transition: all 0 ease;
    vertical-align: top;
}

a {display: block; -webkit-transition: all 0 ease; background: #000;
margin: 10px; color: #fff; height: 50px;
}
a:hover {height: 400px;}