Prevent a div from moving on vertical when it has padding

Question

I have a main <div> and in this <div> I have an image of the product and a <div> with details about the product.

This 'detail' div will contains stuffs like this: name of the product, ingredients, price and one more <div> with 1 <input> and 1 <button>. The problem is that, when the text of name and of the product ingredients has more letters than others, the other elements will move up and down.

How can i do to stay on the same position in this case?

Photo for understanding the problem:

HTML & CSS:

  .container-custom-product-container{ 
        flex-basis: 23%;
        border-radius: 55px 55px 0 0;
        margin-bottom: 40px;
    }
    .ccpc-product-details-container{
        background-color: white;
        border-radius: 0 0 55px 55px;
    }
    .ccpc-product-details-container h4{
        padding-top: 10px;
    }
    .ccpc-product-details-container h6{
        padding-top: 15px;
        color: grey;
    }
    .ccpc-product-buttons{
        padding: 15px 0 25px 0;
    }
    .ccpc-img-container{
        height: 271px;
    }
    .product-image{
        border-radius: 55px 55px 0 0;
        width: 100%;
        height: 100%;
    }
    .ccpc-product-buttons{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .ccpc-input-container{
        flex-basis: 40%;
    }
    .ccpc-product-buttons{
        flex-basis: 40%;
    }

<div class="container-custom-product-container">
                <div class="ccpc-img-container">
                    <img src="<?php echo base_url('assets/images/poza1.jpg');?>" class="product-image"/>
                </div>
                <div class="ccpc-product-details-container">
                    <h4 class="text-center">Hamburger de porc</h4>
                    <h6 class="text-center">carne de porc,chifla,ceapa,rosii,cartofi prajiti</h6>
                    <h4 class="text-center price">20 lei</h4>
                    <div class="ccpc-product-buttons form-group">
                        <div class="ccpc-input-container"><input type="number" class="form-control qty-input" placeholder="Cantitate"/></div>
                        <div class="ccpc-btn-container"><button class="btn btn-primary orange-btn test-btn">Adauga in cos</button></div>
                    </div>
                </div>
            </div>

Answer 1

You can achieve this by adding a height to your div and then say overflow: auto. In this case your divs will have the same dimensions, and you'll be able to see the extra text in the big divs by scrolling. It should be something like:

.ccpc-product-details-container{
    background-color: white;
    border-radius: 0 0 55px 55px;
    height: 100px;
    overflow: auto;

}

Answer 2

The best way to achieve this is by using flexbox https://jsfiddle.net/um0ud2dk/

HTML

<div class="Products">
  <div class="Product">
    <div class="Product__img"></div>
    <div class="Product__details">
      <h2 class="Product__title">Hamburger de porc</h2>
      <p class="Product__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ut sem in tincidunt.</p>
      <h3 class="Product__price">20 lei</h3>
      <div class="Product__buttons">
        <input class="Product__input"/>
        <button type="button" class="Product__button">Adauga in cos</button>
      </div>
    </div>
  </div>
  <div class="Product">
    <div class="Product__img"></div>
    <div class="Product__details">
      <h2 class="Product__title">Hamburger de porc</h2>
      <p class="Product__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ut sem in tincidunt. Fusce dignissim viverra malesuada. Aliquam eleifend at lorem ut venenatis.</p>
      <h3 class="Product__price">20 lei</h3>
      <div class="Product__buttons">
        <input class="Product__input"/>
        <button type="button" class="Product__button">Adauga in cos</button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #eee;
}

.Products {
  display: flex;
  width: 100%;
  max-width: 600px;
}

.Product {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  margin: 10px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.Product__img {
  background: grey;
  width: 100%;
}

.Product__img:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.Product__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
}

.Product__title {
  text-align: center;
}

.Product__description {
  flex-grow: 1;
  border: 1px solid blue;
}

.Product__price {
  text-align: center;
}

.Product__buttons {
  display: flex;
  margin: -5px;
}

.Product__input,
.Product__button {
  flex: 1 0 auto;
  margin: 5px;
}

Answer 3

You can make use of the flex property like so: https://jsfiddle.net/pzhsqcby/3/

CSS:

img {
  width:100%;
  height:100%;
}
.container {
  display:flex;
  flex-direction:row;
}
.card {
 position:relative; 
 background:#000;
 margin:5px;
}
.card-container {
  color:#fff;
}
.card-container h2 {
  margin-top:10px;
  text-align:center;
}
.card-container p {
  text-align:center;
}

HTML:

<div class="container">
 <div class="card">
  <div class="card-container">
      <img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg">
      <h2>
      test 
      </h2>
      <p>
      some description blabla
      </p>
  </div>
</div>
<div class="card">
  <div class="card-container">
      <img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg">
      <h2>
      test 
      </h2>
      <p>
      some description blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      </p>
  </div>
 </div>
</div>

Answer 4

I think you should try to put maxheight to the below content.

carne de porc,chifla,ceapa,rosii,cartofi prajiti