Trying to fix this text so that it doesn't go to one letter at a time

Question

Here is a picture of what these text blocks currently do when the screen gets really small:

I would like to fix it with so that the words stay together as the screen gets smaller, or that maybe even the image gets smaller? I have tried using the font size with vw, but it still splits the words up letter by letter.

Here is the current html for it:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-cell-row w3-center">
  <span class="w3-cell" style="width:100px">
    <img class="w3-section w3-margin-left" width="96px" height="96px" src="/CustomSpace/EndUserHome/Icons/MSConfigManage-02-WF_96px.svg">
  </span>
  <div class="w3-cell w3-xlarge w3-text-red">
    <div class="text-styling-bold" style="overflow-wrap: anywhere">Help, I Need Something</div>
  </div>
</div>

Answer 1

learn more about responsive web and flex-box

.container{
  display: flex;
  flex: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
  <img class="w3-section w3-margin-left" width="96px" height="96px" src="/CustomSpace/EndUserHome/Icons/MSConfigManage-02-WF_96px.svg">
  <div class="w3-xlarge w3-text-red">
    <div class="text-styling-bold" style="overflow-wrap: anywhere">Help, I Need Something</div>
  </div>
</div>

W3.css is not a professional library, take a look at bootstrap and tailwind.css