White-space: normal acting really weird (Some elevated/above others in container)

Question

I've been having an issue with my css code lately, basically Im pulling data from my database and importing it into a slider. Heres a screen shot

I'm open to other ways to accomplish the samething as well, if you need anymore information/code/whatever else that you can get from me tell me and I'll get to that straight away! Thank you an advance!

Heres my code (Its a little sloppyyy beware :p)

.testimonials {
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  min-height: 250px;
}

.testimonials,
.scroll-this,
.testimonials {
  transition: ease all .05s;
}

.testimonials::-webkit-scrollbar {
  background: transparent;
  width: 0px;
}

.testimonials:active {
  cursor: grabbing;
}

.testimonial-backplate {
  position: absolute;
  height: 154px;
  width: 235px;
  background-color: #fde47f;
  margin-top: 8px;
  margin-left: 25px;
  z-index: -999;
  transition: ease all .3s;
}

.testimonial-backplate:hover {
  height: 228px;
  width: 228px;
}

.testimonial {
  display: inline-block;
  margin-right: 25px;
  width: 250px;
  height: 150px;
  background: #FCDD64;
  border-radius: 7px;
  white-space: normal
}

.testimonial:first-child {
  margin-left: 30px;
}

.testimonial:last-child {
  margin-right: 30px;
}

h1.name {
  text-align: right;
  font-size: 25px;
  display: inline;
  color: #332607;
}

h1.country {
  text-align: right;
  font-size: 18px;
  display: inline;
  color: #332607;
}

.message {
  color: #332607;
  padding: 5px;
  font-size: 20px;
}

<div class="testimonials">
  <div class="scroll-this">
    <div class="testimonial">
      <div class="testimonial-backplate"></div>
      <h1 class="message" id="messagefield0">LOREM</h1>
      <h1 class="name" id="namefield0">LOREM</h1>
      <h1 class="country" id="countryfield0">From: LOREM</h1>
    </div>
    <div class="testimonial">
      <div class="testimonial-backplate"></div>
      <h1 class="message" id="messagefield1">LOREM</h1>
      <h1 class="name" id="namefield1">LOREM</h1>
      <h1 class="country" id="countryfield1">From: LOREM</h1>
    </div>
    <div class="testimonial">
      <div class="testimonial-backplate"></div>
      <h1 class="message" id="messagefield2">LOREM</h1>
      <h1 class="name" id="namefield2">LOREM</h1>
      <h1 class="country" id="countryfield2">From: LOREM</h1>
    </div>
    <div class="testimonial">
      <div class="testimonial-backplate"></div>
      <h1 class="message" id="messagefield3">LOREM</h1>
      <h1 class="name" id="namefield3">LOREM</h1>
      <h1 class="country" id="countryfield3">From: LOREM</h1>
    </div>
    <div class="testimonial">
      <div class="testimonial-backplate"></div>
      <h1 class="message" id="messagefield4">LOREM</h1>
      <h1 class="name" id="namefield4">LOREM</h1>
      <h1 class="country" id="countryfield4">From: LOREM</h1>
    </div>
  </div>
</div>

Any thoughts?