JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<div>
    <div id='bob'>
        <img id='broken' src alt='broken'>
        <div id='backgrounded-div'>
            Some text
        </div>
        <div id='some-more-text'>
             Some more text 300px width
        </div>
        
        <span id='container'>
            Container
        </span>
        <span id='another-container'>
            Side-by-side container2
        </span>
    </div>
</div>
<div id='final-div'>
        
</div>

CSS

#backgrounded-div{
    width: 100px; padding: 10px; margin: 20px;background:blue;
}
#some-more-text{
    width: 300px; height:50px; margin: 40px; padding: 30px; background: red url('http://www.mioplanet.com/products/pixelruler/preview.jpg') no-repeat;
}
#container{
        width: 100px; padding: 10px; margin: 20px;background:green;display:inline-block;
}
#another-container{
        width: 100px; padding: 10px; margin: 20px;background:orange url('http://www.mioplanet.com/products/pixelruler/preview.jpg') no-repeat;display:inline-block;
}

#final-div{ /* total visible width is 460 (with 80 invisible margin) */
    width: 434px; height:150px; margin: 40px; padding: 13px; background: red url('http://www.mioplanet.com/products/pixelruler/preview.jpg') no-repeat;
}