JSFiddle - React, Tailwind, and code Playground

HTML

<div id="col1"></div><div id="col2"></div>
    
<div id="temp">
    <div class="article">hello this is a test</div>
    <div class="article">hello this is a test. hello this is a test. hello this is a test. hello this is a test.</div>  
    <div class="article">hello this is a test. hello this is a test.</div>  
    <div class="article">hello this is a test. hello this is a test.</div>  
    <div class="article">hello this is a test. hello this is a test. hello this is a test. hello this is a test. hello this is a test. hello this is a test. hello this is a test.</div>  
    <div class="article">hello this is a test. hello this is a test.</div>  
    <div class="article">hello this is a test</div>  
    <div class="article">hello this is a test. hello this is a test. hello this is a test.</div>  
    
<div>

CSS

#col1, #col2{
    float:left;
    width:50%;
}

.article{
    margin-bottom:10px;
    background-color:#ccc;
}

JavaScript

$( document ).ready(function() {

    $( ".article" ).each(function( index ) {
        var col1Height= $("#col1").height();
        var col2Height= $("#col2").height();
   
        if(col1Height < col2Height){
            $("#col1").append($(this));
        }else{
            $("#col2").append($(this));
        }
    });
    
});