Collapsible box is not moving other elements when it is expanding due to an update from the host website. Is there any alternative?

Question

I am currently using Hostinger to create a website. I wanted text boxes that expanded when clicked and in December I added them using css in an "embed code" box. I tested them and they worked fine. Now they are no longer functioning the same and I have not made any adjustments or changes to them. The text box is directly located above an image so it is coded to push the image down when expanding (display: block;). There was an update with features to editing the images and I think that it must have changed the way the image anchors to the page and is floating on a different layer essentially since now the text goes behind it and nothing moves.

I have contacted support and they were not really helpful and just said yeah it was probably due to an update but to fix the problem that would essentially be me asking them to take over part of the website development and would be an additional paid service. I have tried using a completely different code for the collapsible box and have tried using !important tags. I have tried changing to inline-block but have not had any positive results. Does anyone have any idea how I could fix this or do a workaround by editing the collapsible box code?

The HTML:

<div class="content">
<br>
<p>text here</p>
</br>
</div> 

The JavaScript:

<script> 
     var coll = document.getElementsByClassName("collapsible");
        var i;  for (i = 0; i < coll.length; i++) {   
          coll[i].addEventListener("click", function() {     
            this.classList.toggle("active"); 
            var content = this.nextElementSibling;     
         if (content.style.display === "block") {       
             content.style.display = "none";
        } else {
                 content.style.display = "block";
        }

}); }