JSFiddle - React, Tailwind, and code Playground

by Wolfsilver

HTML

<div class="container3 fl">
    <div class="container2 fl">
        <div class="container1 fl">
            <div class="col1 fl">左
                <br/>小时候我有一个梦想，长大了我就忘了...</div>
            <div class="col2 fl">中
                <br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>
            <div class="col3 fl">右
                <br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>
        </div>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding: 0;
}
.fl {
    float: left;
}
.container3 {
    background:green;
    overflow: hidden;
    position: relative;
}
.container2 {
    background:yellow;
    position: relative;
    right: 30%;
}
.container1 {
    width: 100%;
    background:red;
    position: relative;
    right: 40%;
}
.col1 {
    width: 26%;
    position: relative;
    left: 72%;
    overflow: hidden;
}
.col2 {
    width: 36%;
    position: relative;
    left: 76%;
    overflow: hidden;
}
.col3 {
    width: 26%;
    position: relative;
    left: 80%;
    overflow: hidden;
}