Length of <p> element changing position of parent?

Question

I currently have a set of 'product' divs inside a wrapping containers. These product divs contain an image, header and p text. For some reason, the length of the p text is changing the position of the parent product div. Here is a screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9

The p and h2 elements both have 0 padding and margins. I will try to keep my code as minimal as possible.

HTML:

<div id="content" class="wrapper">
    <div id="content-container">
         <div id="product-container">
                        <div class="product-wrapper">
                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/home-bg.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Mexican Nachos - £6.99</h2>
                                    <p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/enchilada.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Enchiladas - £10.99</h2>
                                    <p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/quesadilla.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Quesadilla - £4.99</h2>
                                    <p>Shorter length test</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/shrimp.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Shrimp Stir Fry - £10.99</h2>
                                </div>
                            </div>


                        </div>
                    </div> <!-- Product container -->
               </div> <!-- Content container -->
            </div> <!-- Content-wrapper container --> 

CSS:

#content {
    height: 100%;
    padding-top: 100px;
}

.wrapper {
    width: 65%; 
    margin: 0 auto;
}

#content-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;
    overflow: scroll;
}

#product-container {
    width: 100%;
    height: 100%;
    padding-top: 25px;
}

.product-wrapper {
    width: 80%;
    height: 100%;
    margin: 0px auto;
    text-align: center;
}

#product {
    display: inline-block;
    height: 352px;
    width: 200px;
    margin: 10px;
    border: solid 2px black;
}

.image-container {
    height: 200px;
    width: 200px;
}

.product-text {
    font-family: 'Open Sans Condensed';
    height: 150px;
    width: 100%;
    text-align: center;
    color: black;
    border-top: solid 2px black;
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.product-text h2 {
    font-size: 23px;
    padding: 0;
    margin: 0;
}

.product-text p {
    font-style: italic;
    font-weight: 700;
    padding: 0;
    margin: 0;
}

.thumbnail {
    position: relative;
    height: 200px;
    width: 200px;
    cursor: pointer;
    z-index: 1200;
}

Answer 1

Your #product elements are display: inline-block. This means they will take inline level characteristics, one of which is baseline alignment (i.e., vertical-align: baseline).

Override the default setting with vertical-align: top.

(Also, you have multiple elements with id="product". ID values should be unique on a page. Consider switching to class="product" instead.)

Answer 2

add vertical-align:top to #product.

#product {
    display: inline-block;
    height: 352px;
    width: 200px;
    vertical-align: top;
    margin: 10px;
    border: solid 2px black;
}

And one more thing, its not a best practice to have same id's for different elements. Instead make it .product class.