MaterializeCSS how can i make row column height the same?

Question

I have a basic grid on materializeCSS my problem is my column is not the same height so my layout became a mess. I know this has been ask on bootstrap but none of the solution works for me in materializeCSS

This is my jsfiddle https://jsfiddle.net/zrb46zr2/1/

<div class="row">
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Answer 1

I actually found a simple solution but it requires a plugin and jquery and also i am not sure on the cons of doing this.

But please feel free to share your own solution i really want to fix this with maybe pure CSS

Anyway the code is like this

read and install this script: https://github.com/liabru/jquery-match-height

HTML

<div class="row">
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
    Looooong Looooong Looooong Looooong Looooong text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>
      Short text
    </p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
    <p>Short text</p>
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>

  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
  <div class="col m4 s6 sample">
    <img src="http://lorempixel.com/580/250/nature/1" class = "responsive-img">
  </div>
</div>

Javascript

$(document.ready(function(){
   $('.sample').matchHeight();
});