JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
</div>

CSS

article {
    float:left;
    width:30%;
    height:40px;
    background:DeepSkyBlue;
    margin:5px;
}
.receptacle {
    height:40px;
    background:pink;
    clear:both;
}

JavaScript

$(document).ready(function() {
    $(".container article").each(function(){
        if ($(this).is(":visible")){
            if ($(this).prevAll("article:visible").length%3 === 2  || $(this).is(":last-child")) {
                $(this).after('<div class="receptacle"></div>');
            }
        }
    });
});