JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grandgrandfather f">
    <div class="grandfather f">
        <div class="father f">
            <div class="left f">
              左<br/>
              左边是我我是左边左边是我我是左边
              左边是我我是左边
            </div>
            <div class="center f">
              中<br/>
              中间是我我是中间中间是我我是中间中间是我我是中间
              中间是我我是中间中间是我我是中间
              中间是我我是中间
            </div>
            <div class="right f">
              右<br/>
              右边是我我是右边，右边右边我是右边再说一遍我是右边，骗你是小狗，我就是右边，右边右边右边
            </div>
        </div>
    </div>
</div>

CSS

html,body{margin:0; padding: 0;}

.f { float: left; }
.grandgrandfather { background:lightblue; overflow: hidden; position: relative; }
.grandfather { background:#B9F9C6; position: relative; right: 30%; }
.father { width: 100%; background:#FAD7F0; position: relative; right: 40%; }
.left { width: 26%; position: relative; left: 72%; overflow: hidden; }
.center { width: 36%; position: relative; left: 76%; overflow: hidden; }
.right { width: 26%; position: relative; left: 80%; overflow: hidden; }