JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="height">
        <span class="text">
            asdasdasdasd
        </span>       
    </div>
</div>

<div class="container">
    <div class="height">
        <span class="text">
            asdasdasd
        </span>       
    </div>
</div>

<div class="container">
    <div class="height">
        <span class="text">
            asda
        </span>       
    </div>
</div>

CSS

.container{
    width:40%;
    position:relative;
    background:#000;
    text-align:center;
    margin:20px;
}
.height{
    position:relative;
    padding-bottom: 55%;
}
.text{
    color:#fff;
    position:absolute;   
}