JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div class="images">
      <figure>
         <figcaption>This is the figcaption of this figure. An image is missing for this test.</figcaption>
      </figure>
      <figure>
         <figcaption>This is the figcaption of this figure.</figcaption>
      </figure>
      <figure>
         <figcaption>Another one.</figcaption>
      </figure>
   </div>

<div class="images">
      <figure>
         <figcaption>This is the figcaption of this figure. An image is missing for this test.</figcaption>
      </figure>
      <figure>
         <figcaption>This is the figcaption of this figure.</figcaption>
      </figure>
      <figure>
         <figcaption>Another one.</figcaption>
      </figure>
   </div>

CSS

.column_b{border: 1px solid black;}
.column_a{border: 1px solid red;}
figure{ border: 1px solid green;}

JavaScript

$(function(){
$('.images').each(function() {
      $(this).prepend('<div class="test_div"></div>');
      $(this).prepend('<div class="column_b"></div>');
      $(this).prepend('<div class="column_a"></div>');
      var counter = 1;
      var figures = $(this).children("figure");
      $(figures).each(function() {
       if(counter == $(figures).length ){
           if (height_a > height_b + $(this).height()) 
           {
               $(this).siblings(".column_b").append(this);
           } 
           else 
           {
              $(this).parent().append(this);
           }
        } 
        else 
        {
            var height_a = $(this).siblings(".column_a").height();
            var height_b = $(this).siblings(".column_b").height();
            if (height_a > height_b) 
            {
                $(this).siblings(".column_b").append(this);
            } 
            else 
            {                        
                $(this).siblings(".column_a").append(this);
            }
         }
         counter++;
      });
   });
});