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; }