JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="side-bar"></div>
    <ul class="sub-container clearfix" >
      <li>afjapfjapgj</li>
      <li>afjapfjapgj</li>        
      <li>afjapfjapgj</li>
      <li>afjapfjapgj</li>
    </ul>
    <div class="clearfix"></div>
  </div>

CSS

.container {
  background: yellow;
}
.side-bar {
  float: left;
  width:120px;
  height:300px;
  border:1px solid red;
}
.sub-container {
  margin-left:120px;
  border:1px solid blue;
}
li{
  float:left;
}
.clearfix {/* 触发 hasLayout */ *zoom: 1; }
.clearfix:after {content:"."; display:block; height:0; line-height: 0; clear:both; visibility: hidden; }