Как объединить две колонки текста в одну, чтобы получилось вот так:
<div class="right-col col">
<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>
Внутри строк span
могут быть также теги, их следует сохранить.
.row {
display: flex;
}
.left-col {
background-color: red;
}
.right-col {
background-color: orange;
}
span {
display: block;
}
.col {
padding: 10px;
}
<div class="row">
<div class="left-col col">
<span>1 строчка левого блока</span>
<span>2 строчка левого блока</span>
<span>3 строчка левого блока</span>
<span>4 строчка левого блока</span>
</div>
<div class="right-col col">
<span>1 строчка правого блока</span>
<span>2 строчка правого блока</span>
<span>3 строчка правого блока</span>
<span>4 строчка правого блока</span>
</div>
</div>