Need design advice on how to make an element look better on mobile devices?

The following is the way an element looks on my website when viewed on a laptop.

The same element looks like this on mobile phones and is simply weird.

Could anyone help me have the design look in the same way? Or atleast help me in having a different design for this?

The following is the code for this.

HTML

<div class="explanation">
                  <h1>
                     <div class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</div>
                  </h1>
                  <!-- Filter: https://css-tricks.com/gooey-effect/ -->
                  <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
                     <defs>
                        <filter id="goo">
                           <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                           <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
                        </filter>
                     </defs>
                  </svg>
               </div>
            </div>

CSS

.goo {
  font-size: 3rem;
  line-height: 1.35;
  display: inline;
  box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0.5rem 1rem;
  filter: url('#goo');
  color: black;
}

.goo:focus {
  outline: 0;
}

I had posted a similar question and had got no help. Looking forward for any recommendations as of now.