CSS Glitchy Collapsible Not Working Correctly

For some reason, the collapsible is giving me a lot of issues. I have tried altering the function but cannot figure out why it is so buggy.

Currently, when I press Read More on the first product, instead of the content showing in the box with a scroll bar, it just hides behind the products. (If you click it once you can see it on the bottom of the page.) And then if you click read more twice, it glitches even more.

Demo JSFiddle: https://jsfiddle.net/lewism6678/r10dvk3c/2/

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";
          }
        });
      }

      function display() {
        var x = document.getElementById("cover");
        if (x.style.display === "block") {
          x.style.display = "none";
        } else {
          x.style.display = "block";
        }
      }