Semantic UI equal height columns

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

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">
            <a href="/campground/<%= e._id %>">Read More</a>
          </div></div>
        </div>
        <% })  %>
      </div>
  </div>

I realized that the columns are already with the same height as you can see here .

Answer 2

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/