JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<div class="container">
  <div class="sidebar-container sidebar-container-main">
      <div class="sidebar-inner-l">
          <div class="sidebar-l">
PM2.5指数	等级	注意事项
0-50
1级 优	参加户外活动呼吸清新空气
50-100
2级 良	可以正常进行室外活动
101-150
3级 轻度	敏感人群减少体力消耗大的户外活动
151-200
4级 中度	对敏感人群影响较大
201-300
5级 重度	所有人应适当减少室外活动
>300
6级 严重	尽量不要留在室外
          </div>
      </div>
      <div class="main">
PM2.5指数	等级	注意事项
0-50
1级 优	参加户外活动呼吸清新空气
50-100
2级 良	可以正常进行室外活动
101-150
3级 轻度	敏感人群减少体力消耗大的户外活动
151-200
4级 中度	对敏感人群影响较大
201-300
5级 重度	所有人应适当减少室外活动
>300
6级 严重	尽量不要留在室外
      </div>
  </div>
  <div class="sidebar-container">
      <div class="sidebar-inner-r">
            <div class="sidebar-r">
PM2.5指数	等级	注意事项
0-50
1级 优	参加户外活动呼吸清新空气
50-100
2级 良	可以正常进行室外活动
101-150
3级 轻度	敏感人群减少体力消耗大的户外活动
151-200
4级 中度	对敏感人群影响较大
201-300
5级 重度	所有人应适当减少室外活动
>300
6级 严重	尽量不要留在室外                
            </div>
      </div>
  </div>
</div>

CSS

html, body { padding: 0; margin: 0 ; overflow: hidden; }
* { height: 100% }

.container{ padding: 0 100px; background: #CCC; }

.sidebar-container { width: 50%; float: left; }
.sidebar-inner-l { padding-right: 50px; }
.sidebar-inner-r { padding-left: 50px; }

.sidebar-l,
.sidebar-r{ background: #FFF; }

.sidebar-container-main { position: relative; }
.main { position: absolute; top:0; right: -50px; width: 100px; background: wheat; }