JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Demo</title>
    </head>
    
    <body>
        <div style="text-align:center;">CONTAINER</div>  
        <div id="container"> 
            
            <table align="center" id="table">
            <tr align="center" width="100%" style="height:100%;">
            <td valign="bottom" align="center" width="100%" style="height:100%;">
            
            <div id="incontainer" style="text-align:left;">
                <div style="text-align:center;">CENTERED in CONTAINER</div>
                
                <div id="content" class="top">
                    Content Div <br />
                    shrink to contents  OR <br />
                    max size: (container width - info div ) <br /><br />
                    
                    <span style="color:red;">
                        Hover over me to see a height and
                        width difference
                    </span>
                </div>
                
                <div id="info" class="top">
                    Info Div <br />
                    shrink to <br />
                    contents <br />
                </div>
                
                <div id="text">
                    text div: width = width of content div + info div
                </div>
                
            </div>
            
            </td>
            </tr>
            </table>
            
        </div>        
    </body>
</html>

CSS

html, body {
    font-fmaily: Arial;
    
    width:100%;
    
    margin: 1px;
    padding: 0px;
}

#container {
    width: 80%;
    min-width: 760px;
    
    /*Demo specific*/
    min-height: 500px;
    border-style: dashed;;
    border-width: 1px;
    
    background-color: #E8E8E8;
    /* end Demo specific*/
    
    margin: auto;
}

#container #incontainer {
    position: relative;
    display:table-cell;
    
    vertical-align: middle;
}

#table {
    width: 100%;
    height: 100%;
   
    margin-top: 8%; 
}

#container #incontainer #content {

    
    /*Demo specific*/
    border-style: dashed;
    border-width: 1px;
    
    background-color: #F5F5F5;
    
    -moz-transition: all 0.5s ease-out;  
    -o-transition: all 0.5s ease-out;  
    -webkit-transition: all 0.5s ease-out;  
    transition: all 0.5s ease-out; 
    /* end Demo specific*/
}

#container #incontainer #content:hover {
    min-width: 500px;
    min-height: 300px;  
}

#container #incontainer #info {
    vertical-align: top;
    
    /*Demo specific*/
    border-style: dashed;
    border-width: 1px;   
    
    background-color: #F5F5F5;
    /* end Demo specific*/    
}

#container #incontainer #text {
    text-align: center;
    
    background-color: #F5F5F5;
    
    /*Demo specific*/
    min-height: 25px;
    border-style: dashed;
    border-width: 1px;
    /* end Demo specific*/
    
    margin-top: 10px;
    margin-bottom: 20px;
}

.top {
    display: inline-block;
    
    padding: 5px; 
}