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 {
    top:100px;
}
#big2 {
    top:400px;
}    
#big1, #big2 {
    position:absolute;
    left:100px;
    width:360px;
    height:230px;
    background-color:#ccc;
    background-size:360px;
}

#big1:after, #big2:after {
    display:inline-block;
    height:100%; width:0;
    content:''; overflow:hidden;
    vertical-align:middle;
    margin:0; border:0; padding:0; outline:0;
}
.small {
    vertical-align:middle; display:inline-block;
    position:relative; left:20px;
    width:320px;
    background-color:#FFF;
}