JSFiddle - React, Tailwind, and code Playground

HTML

<div id="big1">
    <div class="small"><p>some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text, some more text</p></div>
</div>

<div id="big2">
    <div class="small"><p>Some Text</p></div>
</div>

CSS

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    letter-spacing:1px;
}

p {
    padding: 10px;
    text-align: center;
}

#big1 {
    position:absolute;
    left:100px;
    top:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
}

#big2 {
    position:absolute;
    left:100px;
    top:400px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
}

.small {
    position:absolute;
    left:72px;
    width:220px;
    background-color:#FFF;
}