Tukukkk

I am having a issue with spacing between two rows/elements in a HTML template. I am trying to create a grid for the products in our restaurant and downloaded a template from the Internet. As you can see in this picture:
issue1

I am having issues with spacing between the first line and second line elements when trying to add a new row into the text. The rows were added with the p element and when doing that, the whole entire 2nd row just goes down by so much space.

This is the HTML i'm using (issue version vs. non-issue version)

                <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 style="line-height: 0px;">Barilla - Penne Rigate fără gluten 400g</h5> <p style="color:#ff9400; text-decoration: line-through;" >14,00 RON</p> <p style="color:#ff9400; line-height: 0px;"> 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>

And below is the custom CSS I've added:

.single-best-receipe-area .receipe-content {

padding-top: 30px;

text-align: center;

}

.mb-30 {

vertical-align: middle;

margin: 0 auto;

}

.receipe-content {

line-height: 0px;

}

As you can see, I've tried what I found here on stackoverflow with using line-height:0px but with no succes.
I am not web developer unfortunately and just trying to create a menu list for our restaurant. Help would be much appreciated.
Thank you!

EDIT: Demo with code: http://hanulsiminica.ro/test/menu.html

EDIT2: More representative image of the issue: issue2

Using just the code you've provided, changing the html to this to add a 'flex-height' class to the first div with current class of 'row':

<div class="row flex-height">

    <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>

</div>

And the CSS to this:

.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;

}

Gives a better looking result. JSFiddle example here (try resizing your browser too, to see how it looks on smaller and larger screens) - New JSFiddle

Hope this helps.

.card-img{
display: flex;
flex-wrap: wrap;
}

<style>

  .single-best-receipe-area .receipe-content {

    padding-top: 30px;

    text-align: center;

    display: flex;

    flex-direction: column;

  }

</style>