2 Columns of Content with Different Height Contents

I hope I can explain this properly…

I have a few pages on a website that contains profiles of people. Each profile is in its own text box. The length of each profile varies depending on how much the person has said about themselves!

Originally, I organised this as two long half columns, side by side. Each half column contained multiple text blocks for each different profile. All worked well. Except on mobile devices (understandably), it would show as all of the first column followed by all of the second column. That meant the second most important person on the page (the person at the top of the right hand column on desktop view) would end up showing halfway down the page on a mobile device!

Now I have reorganised the page to use lots of grid rows, which each have two columns to allow for two text boxes side by side. On mobile devices, everything is fine now. The order of people is as it should be. However, on desktops, there is now too much padding in between some of the text boxes – if the person in the left hand column has written loads about themselves, and the right hand column person has been brief, the right hand column will show lots of white space underneath the text box.

So the display ends up looking something like (making people into numbers)

1 2
1
3 4
4
4
5 6
7 8
7
9 10

Is there a better way – a better layout element – for me to use to organise these pages? Or is there anything I can do with CSS?

Thanks in advance. I hope I have explained this okay!