JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<ul class="list">
  <li class="left">左侧文字比较少,左侧文字比较少</li>
  <li class="right">右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧右侧文字比较多右侧文字比较多右侧文字比较多</li>
  <li class="main">中间文字比较少</li>
</ul>

SCSS

.list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  .left {
    width: 100px;
    float: left;
    background-color: pink;
  }
  .main {
    margin: 0 110px;
    background-color: lightgreen;
  }
  .right {
    width: 100px;
    float: right;
    background-color: pink;
  }
  .main,
  .left,
  .right {
    margin-bottom: -299px;
    padding-bottom: 299px;
  }
}