<div class="row">
    <span>1 строчка левого блока</span>
    <span>1 строчка правого блока</span>
    <span>2 строчка левого блока</span>
    <span>2 строчка правого блока</span>
    <span>3 строчка левого блока</span>
    <span>3 строчка правого блока</span>
    <span>4 строчка левого блока</span>
    <span>4 строчка правого блока</span>
</div>
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > span {
  display: block;
  flex-basis: calc(50% - 1em);
  padding: 0.5em;
}
.row > span:nth-child(2n-1) {
  background-color: red;
}
.row > span:nth-child(2n) {
  background-color: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.