JSFiddle - React, Tailwind, and code Playground

by CyberAP

HTML

<div class="container">
    <div class="leftBlock width100">100%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width60">60%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width55">55%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width50">50%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width25">25%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width10">10%</div>
    <div class="rightBlock">
        Содержимое правого блока
    </div>
</div>

<div class="container">
    <div class="leftBlock width5">5%</div>
    <div class="rightBlock">
        Содержимое правого блока
        <!-- Откуда здесь такая ширина? -->
    </div>
</div>

CSS

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

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

.leftBlock
{
    /*max-width: 20px;*/ /* не 0, но достаточно мало */
    word-wrap: break-word;
    overflow: hidden;
    background: rgb(240,255,255);
}

.width5 { width: 5%; }
.width10 { width: 10%; }
.width25 { width: 25%; }
.width50 { width: 50%; }
.width55 { width: 55%; }
.width60 { width: 60%; }
.width100 { width: 100%; }

.rightBlock
{
    /* Kids, don't do this at home! */
    background: rgb(200,200,200);
}