JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="list">
    <div class="side">
        <div class="box" style="background: red;">1</div>
        <div class="box" style="background: green;">2</div>
    </div>
    <div class="side">
        <div class="box" style="background: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae adipisci qui totam suscipit distinctio quisquam tenetur ratione fugit! Nobis sunt suscipit sapiente obcaecati quaerat, velit mollitia cum ipsa fuga quas.</div>
    </div>
</div>
<div class="list">
    <div class="side">
        <div class="box" style="background: red;">1</div>
        <div class="box" style="background: green;">2</div>
    </div>
    <div class="side">
        <div class="box" style="background: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae adipisci qui totam suscipit distinctio quisquam tenetur ratione fugit! Nobis sunt suscipit sapiente obcaecati quaerat, velit mollitia cum ipsa fuga quas.</div>
    </div>
</div>
<div class="list">
    <div class="side">
        <div class="box" style="background: red;">loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae assumenda nostrum qui, quod beatae, quas ad, ullam a eum voluptas provident facilis eveniet inventore aspernatur sed non accusantium. Eaque, veniam.
        </div>
        <div class="box" style="background: green;">2</div>
    </div>
    <div class="side">
        <div class="box" style="background: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae adipisci qui totam suscipit distinctio quisquam tenetur ratione fugit! Nobis sunt suscipit sapiente obcaecati quaerat, velit mollitia cum ipsa fuga quas.</div>
    </div>
</div>
<div class="list">
    <div class="side">
        <div class="box" style="background: red;">1</div>
        <div class="box" style="background: green;">2</div>
    </div>
    <div class="side">
        <div class="box" style="background: yellow;">Lorem ipsum dolor sit amet, consectetur...

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.list {
    display: flex;
    margin-bottom :50px;
}
.list .side {
    display: flex;
}
.list .side:nth-child(1){
    flex: 70%;
    flex-direction: column;
}
.list .side:nth-child(1) .box {
    height: 50%;
}
.list .side:nth-child(2){
    flex: 30%;
}
.list .side:nth-child(2) .box {
    height: 100%;
}
.list:nth-child(even) {
    flex-direction: row-reverse;
}