JSFiddle - React, Tailwind, and code Playground

by dpismenny

HTML

<div class="post s1">
    <div class="post-thumbnail">
        <figure class="post-figure">
            <img src="http://i.imgur.com/wYWRJST.jpg" width="320" height="180" alt="pic">
            <figcaption class="post-caption">Игра престолов. Сериал снят по мотивам серии романов Джорджа Р. Р. Мартина «Песнь Льда и Огня» (A Song of Ice and Fire, 1996 — н. в.).</figcaption>
        </figure>
    </div>
    <p>К концу подходит время благоденствия, и лето, длившееся почти десятилетие, угасает. Вокруг средоточия власти Семи королевств, Железного трона, зреет заговор, и в это непростое время король решает искать поддержки у друга юности Эддарда Старка. В мире, где все — от короля до наемника — рвутся к власти, плетут интриги и готовы вонзить нож в спину, есть место и благородству, состраданию и любви. Между тем, никто не замечает пробуждение тьмы из легенд далеко на Севере — и лишь Стена защищает живых к югу от нее.</p>
</div>

<div class="post s2">
    <figure class="post-figure">
        <img src="http://i.imgur.com/wYWRJST.jpg" width="320" height="180" alt="pic">
        <figcaption class="post-caption">Игра престолов. Сериал снят по мотивам серии романов Джорджа Р. Р. Мартина «Песнь Льда и Огня» (A Song of Ice and Fire, 1996 — н. в.).</figcaption>
    </figure>
    <p>К концу подходит время благоденствия, и лето, длившееся почти десятилетие, угасает. Вокруг средоточия власти Семи королевств, Железного трона, зреет заговор, и в это непростое время король решает искать поддержки у друга юности Эддарда Старка. В мире, где все — от короля до наемника — рвутся к власти, плетут интриги и готовы вонзить нож в спину, есть место и благородству, состраданию и любви. Между тем, никто не замечает пробуждение тьмы из легенд далеко на Севере — и лишь Стена защищает живых к югу от нее.</p>
</div>

CSS

.post:after{
    display: table;
    content: "";
    clear: both;
}
.post-figure{
    margin: 0 20px 0 0;
}
.post-figure img{
    margin: 0 0 20px;
}

.s1 .post-thumbnail{
    float: left;
}
.s1 .post-figure{
    display: table;
    width: 1px;
}
.s1 .post-figure img,
.s1 .post-caption{
    display: table-row;
}

.s2 .post-figure {
    float: left;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}