CSS columns: column width depending on max item length per column

I want columns width to be dynamic.

article{
 columns: 2;
 width: 100%;
}

div{ border: 1px solid red; }

<article>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</article>

Is it possible make the columns width uneven in a way that if the first column (or columns) have short-length text items, the column itself will be short, according to the maximum content length in that column?

Restrictions:

1. order of the items must remains logical (top-to-bottom).
2. Container's height & width are dynamic.
3. HTML should remain as a flat list of nodes
4. Arbitrary number of child nodes

Thanks

This is for a client of mine which asks to change the a column so it won't have so much whitespace, so the other columns, where, and if, items are longer, would have more space for their text.

It is indeed a "waste" of space, and that extra whitespace could be used for longer texts, which is completely a reasonable demand by the client.

These lists are from a common React Component used everywhere around the code so this is why I cannot make much modifications to the markup as it will create problems in other places.