JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<h1>При помощи calc()</h1>
<div class="box box__with-calc">
    <h2>Решение есть! (calc)</h2>

    <p>Многострадальный проект продюсера Скотта Рудина по книге Уолтера Айзексона о жизни основателя Apple Стива Джобса наконец-то перешел в новую фазу. Вчера начались съемки драмы, главную роль в которой играет Майкл Фассбендер.</p>
</div>

<h1>С универсальным селектором (*)</h1>
<div class="box box__with-universal">
    <h2>Решение есть!</h2>

    <p>Многострадальный проект продюсера Скотта Рудина по книге Уолтера Айзексона о жизни основателя Apple Стива Джобса наконец-то перешел в новую фазу. Вчера начались съемки драмы, главную роль в которой играет Майкл Фассбендер.</p>
</div>

CSS

body {
    font: 1em/1.3 sans-serif;
}
h1 {
    text-align: center;
    margin: 1em auto 0.5em;
    font-weight: bolder;
    font-size: 1.3em;
}
p {
    margin-bottom: 0.8em;
}
.box {
    position: relative;
    color: #fff;
    background-color: #81821C;
}
.box:before {
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 50%;
    background: url(http://img2.goodfon.ru/original/1920x1080/5/cf/poro-league-of-legends-poro.jpg) no-repeat 50%;
    -webkit-background-size: cover;
    background-size: cover;
}
.box__with-calc {
    padding: 20px 20px 20px calc(50% + 20px);
}
.box__with-universal {
    padding: 20px 20px 20px 50%;
}
.box__with-universal > * {
    margin-left: 20px;
}