Equal height using flexbox in Toolset

	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
      <div class="row flex">
        <wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
          <div class="book-block">[wpv-post-body view_template="loop-item-in-book-view"]</div>
		[wpv-item index=other]
          <div class="book-block">[wpv-post-body view_template="loop-item-in-book-view"]</div>
		[wpv-item index=3]
          <div class="book-block">[wpv-post-body view_template="loop-item-in-book-view"]</div>
		[wpv-item index=pad]
		[wpv-item index=pad-last]
		</wpv-loop>
      </div>
	</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]

.flex {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 1000px;
  max-width: 100%;
  margin: auto;
}

.flex .book-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 250px;
  margin: 1em 0.5em;
  padding: 10px 0px 0px 0px;
  color: #424346;
  background: #FFF;
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  justify-content: center;
}

<a href="https://yckelvin.work/equal-height-using-flexbox-in-toolset/">
[wpv-post-featured-image size="large" class="fix-height"]
<div class="book-cta">
<center>Equal height using flexbox in Toolset<br/>
<span class="cat [wpv-post-taxonomy type="category" format="slug" separator=" "]"></span></center>
</div>
</a>

.book-cta {
  align-self: flex-start;
  margin: auto auto 0px;
	width: 100%;
  display: block;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;

}
.cat {
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px; 
  border: 1px solid #000;
  background-color: #e9983e;
  border-radius: 0px 0px 4px 4px;
  margin-top: 5px;
  display: block;
}

.fix-height {
  max-height: 300px;
  width: auto;
  display: block;
  margin: 10px auto;
}