<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.