Custom card component using Flex - css

Question

I think I'm quite close to getting it right but the problem I'm having right now is that the texts overflow when the screen gets really small..which is unlikely to happen but I want to fix it so that the texts will never overflow out of the box.
How can I achieve that?
Here's my fiddle - https://jsfiddle.net/q3vue7wy/
.wrapper {
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
height: 7.75rem;
transition: all 300ms;
box-shadow: 0 2px 4px 0 rgba(224, 224, 224, 0.5);
border: solid 1px #F5F5F5;
}
.imageContainer {
flex: 0 0 33%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
flex: 1;
text-align: left;
margin: 0 1.1825rem;
}
.title {
font-size: 1rem;
margin: 0 0 0.25rem 0;
padding: 0;
}
.price {
color: #BAA082;
font-size: 0.875rem;
text-transform: uppercase;
margin: 2rem 0 0;
padding: 0;
}
#media(min-width: 46.5rem) {
.wrapper {
height: 8.75rem;
}
.title {
font-size: 1.1875rem;
}
.price {
font-size: 1rem;
}
}
<div class="wrapper">
<div class="content">
<h4 class="title">Point of sale</h4>
<p>Point of sale</p>
<p class="price">From £165</p>
</div>
<div class="imageContainer">
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" alt="" class="image"></div>
</div>

Answer 1

A simple solution is to make the image width shrink when the card gets too small. To do this, change the following properties:
.wrapper {
justify-content: space-between;
}
.imageContainer {
flex: 0 1 33%;
}
.content {
flex: 0 0 auto;
}
Which should give:
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
height: 7.75rem;
transition: all 300ms;
box-shadow: 0 2px 4px 0 rgba(224, 224, 224, 0.5);
border: solid 1px #F5F5F5;
}
.imageContainer {
flex: 0 1 33%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
flex: 0 0 auto;
text-align: left;
margin: 0 1.1825rem;
}
.title {
font-size: 1rem;
margin: 0 0 0.25rem 0;
padding: 0;
}
.price {
color: #BAA082;
font-size: 0.875rem;
text-transform: uppercase;
margin: 2rem 0 0;
padding: 0;
}
#media(min-width: 46.5rem) {
.wrapper {
height: 8.75rem;
}
.title {
font-size: 1.1875rem;
}
.price {
font-size: 1rem;
}
}
<div class="wrapper">
<div class="content">
<h4 class="title">Point of sale</h4>
<p>Point of sale</p>
<p class="price">From £165</p>
</div>
<div class="imageContainer">
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" alt="" class="image"></div>
</div>
JSFiddle: https://jsfiddle.net/wq1cev3y/

Answer 2

HTML- Replace the below code to your HTML code
<div class="wrapper">
<div class="content">
<h4 class="title">
Point of sale
</h4>
<p class="dec">
Point of sale
</p>
<p class="price">
From £165
</p>
</div>
<div class="imageContainer">
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80" alt="" class="image">
</div>
</div>
CSS- Replace the below code to your media query code.
#media only screen and (max-width: 600px)
{
.wrapper{
height: 8.75rem;
}
.title{
font-size: 0.8rem;
margin:0;
padding-bottom:8%;
}
.dec{
font-size: 0.8rem;
margin:0;
padding-bottom:8%;
}
.price{
font-size: 0.8rem;
margin:0;
padding-bottom:8%;
}
}