JSFiddle - React, Tailwind, and code Playground

by Oleg Serebryakov

HTML

<div class="container">
    <div class="leftBlock">
       Слишком-длинный-заголовок-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
    </div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock">
        <div style="width: 1200px; height: 200px;">
            Огромный элемент
        </div>
    </div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock"><!--
        Пусто
     --></div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock"><!--
        Пусто
     --></div>
    <div class="rightBlock"><!--
        Пусто
     --></div>
</div>

CSS

.container
{
    width: 500px;
    padding: 10px;
    margin: 20px auto;
    background: rgb(255,240,240);
}

.leftBlock, .rightBlock
{
    display: table-cell;
    vertical-align: top;
}

.leftBlock
{
    width: 100%;
    max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
    background: rgb(240,255,255);
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
    background: rgb(200,200,200);
}