JSFiddle - React, Tailwind, and code Playground

HTML

<button id="resize">Test Content Adaptability</button>

<table id="modal">
    <tbody id="modal-tbody">
        <tr id="modal-tr">
            <td id="modal-td">
                <div id="modal-content">
                    <div id="modal-body">
                    Some modalicious content here for your  viewing  pleasure. It centers itself no matter what the size or how the  amount of content you add to the modal, how fun!
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

html, body
{
    height: 100%;   
}

#modal
{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: red;
}

#modal-tbody, #modal-tr, #modal-td
{
    height: 100%;
}

#modal-td
{
    vertical-align: middle;
}

#modal-content
{
    position: relative;
    left: 100%;
    height: auto;
    width: 50%; 
    max-width: 225px;
    min-width: 80px;
    max-height: 80%;
    min-height: 80px;
    margin: 0 auto;
    border: 1px solid;
    background: #eaeaea;
    overflow: auto;
}

JavaScript

$('resize').addEvent('click', function(){
    if (this.hasClass('on')){
        this.removeClass('on')
        $('modal-content').tween('width', 300);
    }
    else {
        this.addClass('on')
        $('modal-content').tween('width', 100);
    }
})