JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<table>
    <tr>
        <td class="first-cell">
            <textarea></textarea>
        </td>
        <td class="second-cell">
            <textarea></textarea>
        </td>
    </tr>
    <tr>
        <td class="third-cell">
            <textarea></textarea>
        </td>
        <td class="fourth-cell">
            <textarea></textarea>
        </td>
    </tr>            
</table>
    </div>

CSS

html, body, table{
    width:100%;
    height:100%;
}
body{position:relative;}
.wrap{
    position:absolute;
    top:30px;
    left:30px;
    bottom:30px;
    right:30px;
}
table td{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    vertical-align: top;
    min-height:50%;
}
table .first-cell{
    width:50%;
    height:50%;
    }
table textarea{
    width:100%;
    height:100%;
    border:none;
    outline:1px solid #999;
    resize:none;
}
table textarea:focus{
    outline: inherit;
    background:#fefefe;
    outline:1px solid #999;
    }

JavaScript

var Quad = {
    toggle: function(className) {
        console.log(className);
        switch (className) {
        case 'reset':
            $('.first-cell').css({
                width: '50%',
                height: '50%'
            });
            break;
        case 'first-cell':
            $('.first-cell').css({
                width: '75%',
                height: '75%'
            });
            break;
        case 'second-cell':
            $('.first-cell').css({
                width: '25%',
                height: '75%'
            });
            break;
        case 'third-cell':
            $('.first-cell').css({
                width: '75%',
                height: '25%'
            });
            break;
        case 'fourth-cell':
            $('.first-cell').css({
                width: '25%',
                height: '25%'
            });
            break;
        }
    }
};

$('table').on('click', 'td', function(e){
    e.stopPropagation();
    Quad.toggle($(this).attr('class'));
});
$(document).on('click', 'body', function(){
    Quad.toggle('reset');
});