JSFiddle - React, Tailwind, and code Playground

HTML

<div id="idPai">
    <div class="classFilho">0</div>
    <div class="classFilho">1</div>
    <div class="classFilho">2</div>
    <div class="classFilho">3</div>
</div>

<!-- Código abaixo não relevante -->
<div class="footerBanner">
    <button class="injetar">Adicionar nova div Filho</button>
</div>

CSS

#idPai {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}
.umaColuna {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}
.duasColunas {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.classFilho {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #DDD;
    margin: 0 2px 15px 2px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.footerBanner {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #9E9E9E;
    padding: 10px 0;
    width: 100%;
    background-color:#fff;
}
.injetar {
    color: blue;
    cursor: pointer;
}

JavaScript

// Copia o código jQuery da Resposta, não o deste exemplo
var divPai = $("#idPai");

$(".injetar").click(function() {
    divPai.append( "<div class=\"classFilho\">nova div</div>" );
    if (divPai.height() <= 200) {
        divPai.removeClass("duasColunas").addClass("umaColuna");
    } else {
        divPai.removeClass("umaColuna").addClass("duasColunas");
    }
});