My text and image keep behaving oddly when viewed in a smaller window or on mobile. The image resizes unpredictably based on the length of the text, as shown in my preview. I attempted to use flex wrap to contain the longer text, but it only pushed the image below the text. Am I overlooking something simple here? Thank you in advance for any assistance.
.content-title {
font-family: "Helvetica Neue", sans-serif;
color: black;
}
.icon-img {
background-image: url(https://cdn2.oceansbridge.com/2017/09/16181826/A-hermit-in-a-ruin.-1650-1668-Jan-Adriaensz.-van-Staveren-oil-painting.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
width: 3.4em;
height: 3.4em;
}
.content-heading {
display: flex;
justify-content: space-between;
align-items: center;
}<div class="content-container">
<div class="box">
<div class="content-heading">
<h3 class="content-title">Sample of longer longer longer longer longer longer longer longer longer longer longer longer longer text</h3>
<div class="icon-img"></div>
</div>
</div>
</div>
<div class="content-container">
<div class="box">
<div class="content-heading">
<h3 class="content-title">Sample of shorter text</h3>
<div class="icon-img"></div>
</div>
</div>
</div>