Two-column layout of the text

This topic is not a summary of the basics on the topic "How to make two columns on your page using divs and css". My task was to split the monolithic text into two columns, similar to how MS Word does it. There is no standard tag in css for this, so I had to dance a little with a tambourine to solve the problem.
The width of the column with the text greatly affects the ease of perception of information by the user. And therefore, given the current popularity of widescreen monitors, breaking down the text into columns significantly increases its “readability”.
To break the text into columns, css and a bit of javascript were used. The partitioning algorithm itself consists of only four steps:

Step 1.

We create a block for the text (in the example it is called “News”) and put two blocks in it, in which our text will be located. All text is in the first column so far.
Sorry for my French Photoshop, I did quick illustrations, I think the meaning will be clear:

Step 2

The first step we drove the entire text into the first column Col1. Now, with javascript, we copy all the text into the second column (in the illustrations, the text is specially made with a gradient so that in the future it can be determined where its upper part and where the lower one):

Step 3

All the same javascript'om determine the current height of the columns Col1 and Col2. Column Col2 is set to negative margin. Margin should be exactly half the height of the column. Thus, we raise the second column up, leaving visible only its lower half:

Step 4

We set the general (yellow) block of text to a height equal to half the height of the column. We trim the rest using the overflow: hidden property.


And look at the result.

Instead of a conclusion

A more difficult task is to insert an image or video into this text if it falls exactly in the middle of the text, or if its width exceeds the width of one column. Agree, the photo will look ridiculous if half of it is located at the bottom of the first column, and the second half is at the top of the second.
I did not have the task to implement such an option, but in theory this is also being solved. All images must have the position: absolute attribute, and inside the columns using javascript it will be necessary to create empty elements with dimensions and coordinates exactly under the image with a relative position (otherwise the text will be hidden under the images).