JSFiddle - React, Tailwind, and code Playground

HTML

<div class="justified-divs">
    <div>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

CSS

.justified-divs {
    font-size: 0;
   text-align: justify;
   -ms-text-justify: distribute-all-lines;
   text-justify: distribute-all-lines;
    
    overflow: hidden;
    
    /*temp debug colors */
    background-color: green;
}

.justified-divs:after {
  /* stretch divs to give them equal horizontal spacing */  
  content: '';
  width: 100%;
  display: inline-block;
}

.justified-divs div {
    background-color: white;
    font-size: 14px;
    vertical-align: top;
   display: inline-block;
   text-align: left;
   *display: inline; /* <= IE7 hacks */
   zoom: 1; /* <= IE7 hacks */
    
    /* use large padding and equal size negative margin to keep column heights the same size as whichever is tallest */
   padding: 0 10px 9999px 10px; 
   margin-bottom: -9999px;
   *margin-bottom: -9999px;
    

    /*temp debug colors */
   width: 30%;
    border: 2px solid red;
}