Layout of the text in two columns in pure CSS

This post is inspired by my previous topic , in which the monolithic text was divided into two columns with the help of JS. In the comments there was a phrase like "With JS and a fool would do, that would be in pure CSS."
The algorithm is not changed, the essence remains the same. The practical benefits of the topic - 0, it is unlikely that this method will be used in real projects. Just for fun, as they say.
Look what happened
Under the cut code ...
<div id="Center"'>
<div id="News"'>
<div class="Column" id="Col1"'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
<span class="Zagl1"'>
</span'>
</div'>
<span class="Col2"'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
</span'>
</div'>
</div'>


And the actual CSS:

#News {
position : relative;
overflow : hidden;
top : 33%;
}

#News P{
margin : 0px;
}

#Col1 {
width : 260px;
margin-right : 40px;
text-align : justify;
float : left;
}

#Col1 span.Zagl1 {
display : block;
width : 260px;
height : 1000px;
position : absolute;
top : 50%;
background : #f00;
}

#News span.Col2 {
width : 260px;
text-align : justify;
position : absolute;
top : -50%;
left : 50%;
float : left;
}