How to make text within one component continue in another because of lack of space

Question

I need to display list of components(with text) in a two column preview, pretty much like a magazine. I have a list of component for which I use map and pass the correct text so it can be rendered. The issue is that when a certain component does not fit at the end of the page (first column), its texts needs to continue in the second column. Is there any way to do this? Maybe some npm library that does this already? I tried using css column-count property but it does not give me too much power over the optimization of the space.