Text Spilling Outside of Div - html

Question

The screenshot above shows the problem. Unlike the other similar question I don't need this to work for international text. I need this to work for varying screen sizes and varying amounts of text. The text will come from a databse in production, so I can't simply figure out the breakpoint at which the div needs to move down in advance.
The solution I am looking for would first move the text block below the image, and then resize the text div vertically as necessary to accomidate all the text. JS or CSS solutions are fine.
HTML below:
<div class="product">
<img class="productImg" src="http://placehold.it/300x240">
<div class="productTxt">
<h1>Title</h1>
<h3>Price</h3>
<p>Suspendisse sed fermentum neque, vel rutrum velit. Curabitur eget dolor luctus, sodales felis sed, dapibus justo.
Suspendisse in condimentum ante. Sed nec dui tristique, sollicitudin velit eget, ultricies dui.
Ut rhoncus ornare urna, quis venenatis velit ornare eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Etiam ornare sem finibus lectus volutpat, in feugiat elit ultrices. In sed vulputate eros, quis volutpat elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi libero, posuere nec laoreet quis, viverra et lorem. Duis odio ante, efficitur et felis at, tincidunt interdum ante.
Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum dui at cursus. Aliquam mollis nec magna ac mattis.
Nam nec est tincidunt leo facilisis finibus non nec mauris. Vestibulum rutrum tristique tincidunt. </p>
</div>
</div>
CSS:
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
height: 330px;
border-bottom: 2px solid #16A085;
}
.productImg {
width: 240px;
height: 300px;
display: inline-block;
position: relative;
}
.productTxt {
box-sizing: border-box;
vertical-align: top;
display: inline-block;
height: 100%;
width: calc(100% - 270px);
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
}
I can't really remove the relative positioning from the productTxt div without breaking the positioning of another element that is within the same div (which I have removed for simplicity in this example)

Answer 1

Remove the fixed height in of parent div .product and add a min-width to .productTxt. If you use 100% for width or height, it's relative to the parent div, and you must specifically set the parent's width or height. That's why your height: 100% on .productTxt was not changing based on your content and was fixed to parent div .product's height: 330px.
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
border-bottom: 2px solid #16A085;
}
.productTxt {
box-sizing: padding-box;
vertical-align: top;
display: inline-block;
height: 100%;
width: calc(100% - 270px);
min-width: 220px; /* change this to what you want */
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
}

Answer 2

To move the text block below the image remove display: inline-block; from .productTxt class.
If you want to keep the height of .product class fix then adjust height of .productTxt according to .product class and give css overflow: auto; to .productTxt all you data will displayed with scroll panel,so your HTML is
<div class="product">
<img class="productImg" src="http://placehold.it/300x240">
<div class="productTxt">
<h1>Title</h1>
<h3>Price</h3>
<p>Suspendisse sed fermentum neque, vel rutrum velit.
Curabitur eget dolor luctus, sodales felis sed, dapibus
justo.Suspendisse in condimentum ante. Sed nec dui
tristique,sollicitudin velit eget, ultricies dui.
Ut rhoncus ornare urna, quis venenatis velit ornare eu.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Etiam ornare sem finibus lectus volutpat, in feugiat elit
ultrices. In sed vulputate eros, quis volutpat elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse nisi libero, posuere nec laoreet quis, viverra
et lorem. Duis odio ante, efficitur et felis at, tincidunt
interdum ante.
Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum
dui at cursus. Aliquam mollis nec magna ac mattis.
Nam nec est tincidunt leo facilisis finibus non nec
mauris.Vestibulum rutrum tristique tincidunt.
</p>
</div>
</div>
And your CSS will be
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
height: 550px;
border-bottom: 2px solid #16A085;
}
.productImg {
width: 240px;
height: 300px;
display: inline-block;
position: relative;
}
.productTxt {
box-sizing: border-box;
vertical-align: top;
height: 230px;
width: calc(100% - 270px);
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
overflow: auto;
}