JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<table><tbody>
    <tr class="outer"><td>hello</td><td>world</td></tr>
    <tr class="outer"><td >hello</td><td>world</td></tr>
</tbody></table>

<button>x</button>

CSS

div { border: 1px dashed green; }
td {
    border: 1px solid blue;
    vertical-align: top;
    padding: 6px;
    height: 40px;
    line-height: 40px;
    -webkit-transition: height 3s;
}

.outer.active td {
    padding: 0px 6px;
    height: 0px;
    overflow: hidden;
    position: relative;
}

.wrap {    
    height: 40px;
    position: absolute;
    padding: 6px 0px;
}

CoffeeScript

$ ->
    $(document).on 'click', 'button', ->
        $tr = $('tr:first-child')
        $tr.find('td').wrapInner('<div class="wrap"/>')
        $tr.addClass 'active'