Masonry with 50% and 100%. width items not working

[sbalet]

Hello,

I'm developing a website with a page that has text on the left, then news cards in a column on the right. Some news will be 100% width of the column, others 50% and I want them to be reordered by masonry to fill the possible gaps
As you can see on this codepen, it does not work on the example from left part (with 100% - 50% elements), but works on the right with 50% - 25% elements.

I'd like that on the left part item 3 comes after one to fill the gap, but I don't know why it does not want to.

Any help very appreciated, thanks in advance

Codepen