JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="box">
    <div class="box-inner">
        <div class="box-content">Вим Вендерс снимает Джеймса Франко в 3D</div>
    </div>
</div>
<div class="box">
    <div class="box-inner">
        <div class="box-content">Почетный приз Берлинского кинофестиваля в этом году вручат Виму Вендерсу, чья ретроспектива собирает аншлаги.</div>
    </div>
</div>

CSS

.box {
    padding-bottom: 25%;
    border: 5px solid #ccc;
    width: 25%;
    height: 0;
    position: relative;
    overflow-x: hidden;
}
.box-inner {
    height: 100%;
    position: absolute;
    display: table;
    text-align: center;
}
.box-content {
    display: table-cell;
    vertical-align: middle;
}