‘ More Details ‘ button pushes aligned div content out of alignment

I have two rows of four div class thumbnails with a see more details button, which when pressed shows more text. When I was testing a single thumbnail it worked fine, but now with two rows of thumbnails. When the button is clicked, the other thumbnails are pushed out of the singly. I have tried to aligned these with inline block but this change made the ‘see more’ text hidden underneath the thumbnail as the next row doesn’t drop the content down.

On another page I have a <h2 in-between the thumbnail rows and this works perfectly but when the two rows are directly after each other they don’t react how it should. Either showing the text under the thumbnail or displacing the whole next row of thumbnails.

function toggle(button) {

  const moreDetailses = document.querySelectorAll(".moreDetails");
  for (let i = 0; i < moreDetailses.length; i++) {
    moreDetailses[i].style.display = "none";
  }
}

.thumbnail-row {
  height: 400px;
  width: auto;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 01 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 02 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 03 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 04 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 05 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
  <div class="thumbnail-frame">
    <div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
    <div class="details">
      <div class="moreDetails">
        <h3> episode 06 details </h3>
      </div>
      <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
    </div>
  </div>
</div>