在纯CSS中水平“拆分”元素，每半部分具有不同的内容

<div class="split-container">
  <div class="left-half">
    <p>This is the left half.</p>
  </div>
  <div class="right-half">
    <p>This is the right half.</p>
  </div>
</div>

.split-container {
  display: flex;
}

.left-half, .right-half {
  flex: 1;
}

.left-half::before {
  content: "";
  display: block;
  height: 100%;
  background-color: blue;
}

.right-half::before {
  content: "";
  display: block;
  height: 100%;
  background-color: red;
}