Stacking / Tiling / Mosaic Flexbox columns with DIV text (not images) done with pure CSS [duplicate]

I've looked everywhere and are struggling for a solution to creating a mosaic layout with CSS only. I'm not even sure mosaic is the right terminology for what I am trying to do ... collapsing tiles, stacking columns, cards ... whatever it is here is a picture of what I am trying to achieve.

This is created using the following html layout:

<div class="container"><div class="mosaic"><div class="item">        Element 1-1<br>Text<br>text<br>text<br><br><br><br><br><br><br><br>more text<br>Text<br>text<br>text<br><br><br><br><br><br><br><br>more text<br>Text<br>text<br>text<br><br><br><br><br><br><br><br>more text</div><div class="item" style="height: 75px;">Element 1-2</div><div class="item">Element 1-3</div><div class="item">Element 1-4</div><div class="item">Element 1-5</div><div class="item">Element 1-6</div><div class="item">Element 1-7</div><div class="item">Element 1-8 <br> this is bigger a little</div><div class="item">Element 1-9</div></div></div>

And the following CSS:

      .container {        background-color                        : lightgray;        border                                  : 2px solid black;        height                                  : 700px;        overflow                                : auto;        width                                   : 1000px;      }      .mosaic {        width                                   : 100%;        min-height                              : 100%;        display                                 : flex;          flex-wrap                             : wrap;          flex-direction                        : row;          column-gap                            : 5px;          justify-content                       : flex-start;          row-gap                               : 5px;      }      .item {        background-color                        : darkorange;        padding                                 : 3px;        flex-basis                              : calc(50% - 10px);        flex-grow                               : 1;      }

Basically when the space allows the elements (or "cards") should tile (i.e. collapse up to the adjacent space in the 2nd column) within the vertical scroll container. The heights of the individual cards should be calculated on their content and would not usually be specified because they are cards of text not images with defined height and widths.

A few things I want in the end result:

• only two columns if the horizontal screen real estate is available (i.e. more than 1000px of screen)
• the minimum width of the card cannot be less than 500px in width but can grow to whatever width is available so that they take up 50% space
• card height is dynamic based on text content (e.g. in the example pic element 1-1 is large with text content so column 2 could have several smaller cards stacked in the available column space rather than element 1-2 growing)
• If the viewer is a mobile device that can't display 1000px width then it should collapse to single column.

I've tried to acheive my desired result using CSS grid and CSS column layouts but nothing creates the tiled effect.

Javascript could be used as a absolute last resort.