Jak rozwiązać problem z pustą przestrzenią jeżeli jest więcej tekstu?

Witam, kiedy tekst jest tej samej długości to wszystko ładnie się ustawia obok siebie i nie ma pustych przestrzeni. Ale jeżeli tylko jeden akapit się zwiększa, jego wysokość jest automatycznie większa, to wszystko niżej się rozwala. Jak zrobić by elementy w obydwóch kolumnach przylegały bezpośrednio do elementu wyżej?

Niebieska linia wskazuje pustą przestrzeń, czerwona zaś gdzie powinien zaczynać się kolejny .. "feature" na stronie.

Podaj kod, bo na razie ciężko stwierdzić.

Bloki ustawiasz przez float, prawda?

https://jsfiddle.net/tp4s3z0q/

section.features {
  display: block;
  margin-top: 80px;
}

section.features h1 {
  text-align: center;
  padding: 0 0 20px 0;
  color: rgb(36, 31, 31);
  font-size: 32px;
  font-weight: 700;
  line-height: 25px;
}

section.features .features-wrapper {
  /*    vertical-align: top;*/
  padding: 10px 40px;
  margin: 0 auto;
  display: block;
}

section.features .feature {
  float: left;
  display: block;
  width: 40%;
  padding: 20px;
  margin-bottom: 40px;
}

section.features .feature img {
  float: left;
  padding: 0 16px 0 0;
}

section.features .feature h2,
section.features .feature h3 {
  margin-left: 80px;
}

section.features .feature h2 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 15px;
  color: rgb(36, 31, 31);
}

section.features .feature h3 {
  color: rgb(94, 94, 94);
  font-family: Cabin;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

Propozycja ode mnie: https://jsfiddle.net/kn8gpuae/

Jesteście super! Dzięki +repy !