matchHeight issues

by Sree K

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/dee3dd251e.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan risus et mi pharetra, eget porttitor lacus eleifend. Sed ac iaculis massa. Morbi sed congue ligula.
</div>
</div>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor.
</div>
</div>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan risus et mi pharetra, eget porttitor lacus eleifend. Sed ac iaculis massa. Morbi sed congue ligula.
</div>
</div>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan risus et mi pharetra, eget porttitor lacus eleifend. Sed ac iaculis massa. Morbi sed congue ligula.
</div>
</div>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan risus et mi pharetra, eget porttitor lacus eleifend. Sed ac iaculis massa. Morbi sed congue ligula.
</div>
</div>
<div class="card sameheight-card">
<div class="header sameheight-header">
 Text
</div>
<div class="body sameheight-body">
 Lorem ipsum dolor sit amet, consectetur adipiscing...

CSS

.card {
  display:block;
  float:left;
  width:33%;
  background-color:yellow;
  color:white;
}
.card .header {
  display:block;
  background-color:blue;
  padding:10px;
}
.card .body {
  display:block;
  background-color:red;
  padding:10px;
}

JavaScript

$('div[class*="sameheight-"]').matchHeight();
/* 
$(".sameheight-card").matchHeight({
byRow:$("body")}
);
$(".sameheight-body").matchHeight({
byRow:$("body")}
);
$(".sameheight-header").matchHeight({
byRow:$("body")}
);
*/