JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one <br /> two <br /> three</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one</li>
    </ul>
  </div>
</div>

CSS

* { box-sizing: border-box; }
.wrap {
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;
}
.wrap .col {
    flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: 0px 12px 0px 12px; }

JavaScript

var $lists = $('ul.content');

for (i=0; i < 10; i++) {
    var highest = 0;
    $lists.each(function(idx, elem) {
        var h = $(elem).children().eq(i).outerHeight();
        if (h > highest) highest = h;
    });
    $lists.each(function(idx, elem) {
        $(elem).children().eq(i).outerHeight(highest);
    });    
}