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">
            
            <div id="incontainer">
                <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 />
                </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>
        </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 {
    width: 90%;
    
    margin: auto;
    
}

#container #incontainer #content {
    width: 70%;
    
    /*Demo specific*/
    min-height: 400px;
    border-style: dashed;
    border-width: 1px;
    
    background-color: #F5F5F5;
    /* end Demo specific*/
}

#container #incontainer #info {
    width: 25%;
    
    /*Demo specific*/
    border-style: dashed;
    border-width: 1px;   
    
    background-color: #F5F5F5;
    /* end Demo specific*/
    
    float: right;
}

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

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