JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo-block">
  <div class="demo-wrapper">
    <div class="demo-side">
      <p>固定</p>
    </div>
    <div class="demo-main">
      <p>可变</p>
    </div>
  </div>
</div>

CSS

.demo-block {
  background: #456;
  height:300px;
}
.demo-wrapper {
  width: 100%;
  border: 1px solid #fcc;
  text-align: center;
  overflow: hidden;
  height:300px;
}

.demo-wrapper p {
  margin: 0;
  padding: 1em;
}

.demo-side {
  float: left;
  width: 100%;
  background: #ccc;
  height:100px;
}

.demo-demo-main {
  float: left;
  widh: 100%;
  background: #16a085;
}

.demo-demo-main p {
  margin-left: 240px;
}