JSFiddle - React, Tailwind, and code Playground

by Matt Reynolds

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row flex-height">
                <!-- Single Best Receipe Area -->
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30">
                        <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798850_001.jpg?_=1527527264626" width=290px height=304px alt="" class="center-block" />
                        <div class="receipe-content">
                                <h5>Barilla - Penne Rigate fără gluten 400g</h5> 
                                <p style="color:#ff9400; text-decoration: line-through;">14,00 RON</p> 
                                <p style="color:#ff9400;"> REDUCERE 10% - 12,00 RON</p>
                        </div>
                    </div>
                </div>

                <!-- Single Best Receipe Area -->
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30" >
                        <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798854_001.jpg?_=1505902808944" width=320px height=304px alt="" class="center-block" />
                        <div class="receipe-content">
                            <a href="receipe-post.html">
                                <h5>Barilla - Spaghetti fără gluten 400g</h5>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Single Best Receipe Area -->
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30">
                        <img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798852_001.jpg?_=1505901465925" width=320px height=304px alt="" class="center-block" />
                        <div class="receipe-content">
                            <a href="receipe-post.html">
        ...

CSS

.single-best-receipe-area{
  text-align:center;
  line-height:30px;
  padding-top:20px;
}
.receipe-content{
  padding-top:30px;
}
.row.flex-height {
  display: flex;
  flex-wrap: wrap;
}
.row.flex-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}