JSFiddle - React, Tailwind, and code Playground

by tinymonkey1

HTML

<div class="table">
    <div class="row">
         <div class="cell" style="top:20px">
              Column 1
        </div>
        <div class="cell">
              Column 2
        </div>
    </div>
</div>
<div class="spacer"></div>
<div class="demo">
    But this works !
</div>

CSS

.table{display:table}
.table .row {display:table-row}
.table .row .cell {display:table-cell;position:relative}

.spacer{height:100px;width:100%}

.demo{}

JavaScript

$('.table .row .cell').mouseenter(function(){
        $(this).animate({top:'20px'},300); 
    });
    $('.demo').mouseenter(function(){
        $(this).animate({'marginTop':'20px'},300);
    });