JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="placeholder">
        <div id="content"></div>
    </div>
</div>

CSS

#container { 
    position: absolute; 
    top: 10px; 
    left: 100px; 
    width: 100px; 
    height: 100px; 
    border: 3px solid #666; 
    text-align: center;
}

#placeholder {
    width: 300px;
    height: 94px;
    border: 3px solid red;
    position: absolute;
    left: -103px;
}

#content { 
    display: inline-block; 
    height: 88px; 
    border: 3px solid #99ccff; 
    margin: 0 auto;
}

JavaScript

/* This script here is only to demonstrate content with various width, it won't be used in production */
$(function(){
    ResizeContent();
});

function ResizeContent(){
    $('#content').width(Math.floor((Math.random()*150)+20));
    setTimeout(ResizeContent, 1000);
}