Semantic UI equal height columns - html

Question

I found "equal height" classes in Semantic UI, but I can't make inner div's the same heights ("ui segment" for example).
More detail here .
http://jsfiddle.net/ozk615p6/34/
Check my below Screenshots
<div class="ui container indent border shadow">
<div class="two column stackable ui grid ">
<div class="equal height row">
<div class="column">
<h2 class="ui header center aligned ">Lorem</h2>
<div class="ui segment ">
<div class="ui list ">
<div class="item">
<i class="checkmark icon"></i>
<div class="content">
Lorem
</div>
</div>
<div class="item">
<i class="xmark icon"></i>
<div class="content">
Lorem
</div>
</div>
</div>
</div>
</div>
<div class="column">
<h2 class="ui header center aligned ">Lorem</h2>
<div class="ui segment ">
<div class="ui list">
<div class="item">
<i class="checkmark icon"></i>
<div class="content">
Lorem
</div>
</div>
<div class="item">
<i class="checkmark icon"></i>
<div class="content">Lorem</div>
</div>
<div class="item">
<i class="checkmark icon"></i>
<div class="content">Lorem</div>
</div>
<div class="item">
<i class="xmark icon"></i>
<div class="content">Lorem</div>
</div>
<div class="item">
<i class="xmark icon"></i>
<div class="content">Lorem</div>
</div>
<div class="item">
<i class="xmark icon"></i>
<div class="content">Lorem</div>
</div>
<div class="item">
<i class="xmark icon"></i>
<div class="content">Lorem</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

One approach is to use ui cards per this documentation. In your JSFiddle attached, the version did not yet support equal hight cards which automatically used flex. If you upgrade to latest, you'll obtain support for this.
See an example here: https://jsfiddle.net/5kL2pf7q/1/

Answer 2

According to this post, one possible solution is to use this to match the height of your columns.
Although writing html with just the Semantic UI classes in the code below:
<div class="ui container">
<div class="ui three column doubling stackable grid container">
<% camps.forEach(function (e) { %>
<div class="column">
<h1 class="ui header"><%= e.name %> </h1>
<img src="<%= e.image %>" alt="" class="image small ui">
<p> <%= e.description %></p>
<div class="extra"><div class="ui label">
Read More
</div></div>
</div>
<% }) %>
</div>
</div>
I realized that the columns are already with the same height as you can see here.