Угловые анимации: div входит за другим div

Я пытаюсь сделать простую вещь в своем приложении Angular 7.

По сути, у меня есть заголовок, и когда я нажимаю на него, комментарий ease-in сверху размещается прямо под заголовком. Проблема в том, что когда комментарий перемещается, это отображается над заголовком не совсем тот эффект, который хотелось бы получить.

Я попытался добавить свойство z-index в CSS, чтобы поднять заголовок, но безрезультатно.

app.component.ts

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})
export class AppComponent  {
  visible = false;

  showMessage() {
    this.visible = !this.visible;
  }
}

app.component.html

<div (click) = "showMessage()">
    <div class = "title">Click here to reveal the comment</div>
    <div class = "title">25/04/2019 17:30:00</div>
    <div class = "comment" *ngIf = "visible" [@slideInOut]>Lorem ipsum...</div>
</div>

app.component.css

.title {
  background-color: aqua;
  z-index: 1000;
  cursor: pointer;
}

.comment {
  background-color: red;
  z-index: 0;
}

Я создал StackBlitz, чтобы показать проблему.

Спасибо за вашу помощь!