Hide entire SqSp col when contents are hidden too

Site URL: https://acsolutions.squarespace.com/

Hi,

I'm making a product page with custom filters. Each product is a code block, and when the filter is applied the code block is set to 

display: none;

The columns still take up space even when all products in that column are hidden. How can I automatically hide empty columns so the remaining products are always aligned left?

Here is what I've tried so far with no success:

$(document).ready(function()
    {
     var colHeight = $('.col.sqs-col-4.span-4').height();
     console.log(colHeight);     
     if(colHeight>=38) {
         $('col.sqs-col-4.span-4').show();
     }
     else {
         $('col.sqs-col-4.span-4').hide();
     }
});

Here is a sample of the JS and jQuery used in filtering:

$(document).ready(function() {
    $(".table-of-contents.brand li").click(function () {
        $(".table-of-contents.brand a").removeClass("active");
        $(this).find("a").addClass("active"); 
    });
});

$(document).ready(function() {
    $(".table-of-contents.sector li").click(function () {
        $(".table-of-contents.sector a").removeClass("active");
        $(this).find("a").addClass("active");
    });
});

$('#baltimore').click(function() {
        $('.baltimore').show();
        $('.alfa').hide();
        $('.airedale').hide();
        $('.danfoss').hide();
        $('.thermocold').hide();    
    });

This is the site, and the password is 

acsolutions

Thank you!

Setting the specific

col sqs-col-4 span-4

to 

display: none;

formats the layout correctly. What JS or jQuery can I use to automatically set this when both child divs are set to 

display: none;

?