mdb-card-reveal creates bottom spacing

<div class="row">

  <!--Rotating card-->
  <div class="col-md-4">
    <mdb-flipping-card #cards>
      <!--Front Side-->
      <div class="face front tp-box_side tp-box_front">

        <!-- Image-->
        <div class="card-up">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
        </div>
        <!--Avatar-->
        <div class="avatar">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
        </div>
        <!--Content-->
        <div class="card-body">
          <h4>Jonathan Doe</h4>
          <p>Web developer</p>
          <!--Triggering button-->
          <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
            <i class="fa fa-repeat"></i> Click here to rotate</a>
        </div>
      </div>
      <!--/.Front Side-->

      <!--Back Side-->
      <div class="back tp-box_side tp-box_back">

        <!--Content-->
        <h4>About me</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,
          dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
        <hr>
        <!--Social Icons-->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="icons-sm fb-ic">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm tw-ic">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm gplus-ic">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm li-ic">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <i class="fa fa-undo"></i> Click here to rotate back</a>

      </div>
      <!--/.Back Side-->
    </mdb-flipping-card>
  </div>
  <!--/.Rotating card-->


  <!--Rotating card-->
  <div class="col-md-4">
    <mdb-flipping-card #cards2>
      <!--Front Side-->
      <div class="face front tp-box_side tp-box_front">

        <!-- Image-->
        <div class="card-up">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg" class="img-fluid">
        </div>
        <!--Avatar-->
        <div class="avatar">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(11).jpg" class="rounded-circle img-responsive">
        </div>
        <!--Content-->
        <div class="card-body">
          <h4>Marie Johnson</h4>
          <p>Web developer</p>
          <!--Triggering button-->
          <a class="rotate-btn" data-card="card-1" (click)="cards2.toggle()">
            <i class="fa fa-repeat"></i> Click here to rotate</a>
        </div>
      </div>
      <!--/.Front Side-->

      <!--Back Side-->
      <div class="back tp-box_side tp-box_back">

        <!--Content-->
        <h4>About me</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,
          dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
        <hr>
        <!--Social Icons-->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="icons-sm fb-ic">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm tw-ic">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm gplus-ic">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm li-ic">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards2.toggle()">
          <i class="fa fa-undo"></i> Click here to rotate back</a>

      </div>
      <!--/.Back Side-->
    </mdb-flipping-card>
  </div>
  <!--/.Rotating card-->


  <!--Rotating card-->
  <div class="col-md-4">
    <mdb-flipping-card #cards3>
      <!--Front Side-->
      <div class="face front tp-box_side tp-box_front">

        <!-- Image-->
        <div class="card-up">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/Others/photo7.jpg" class="img-fluid">
        </div>
        <!--Avatar-->
        <div class="avatar">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-responsive">
        </div>
        <!--Content-->
        <div class="card-body">
          <h4>Amy Kill</h4>
          <p>Content Specialist</p>
          <!--Triggering button-->
          <a class="rotate-btn" data-card="card-1" (click)="cards3.toggle()">
            <i class="fa fa-repeat"></i> Click here to rotate</a>
        </div>
      </div>
      <!--/.Front Side-->

      <!--Back Side-->
      <div class="back tp-box_side tp-box_back">

        <!--Content-->
        <h4>About me</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,
          dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
        <hr>
        <!--Social Icons-->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="icons-sm fb-ic">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm tw-ic">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm gplus-ic">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm li-ic">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards3.toggle()">
          <i class="fa fa-undo"></i> Click here to rotate back</a>

      </div>
      <!--/.Back Side-->
    </mdb-flipping-card>
  </div>
  <!--/.Rotating card-->

</div>