Sugestão para teste de erro V2

Achei interessante a proposta do Luiz sobre, mas quis ir além e resolvi deixar o usuário interagir com a mensagem após clicar no botão e aparecer o erro, junto irá aparecer um botão de fechar, um X, para quem quiser saber como eu fiz isso segue abaixo o código css, html, js:

 <div>
       <p id="erro"><i class="small material-icons icon-close">close</i>Ocorreu um erro, por favor tente novamente!</p>
  </div>

#erro {
    color: #000;
    background-color: #ffbab5;
    width: 280px;
    padding: 0px 0px 19px 21px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 6px solid #fa5056;
    display: none;
}

.icon-close {
    font-size: 18px!important;
    cursor: pointer;
    color: #000;
    transform: translate(229px, 3px);
    transition: all .4s ease-out;
    display: flex;
    overflow: hidden;
}

.icon-close:hover {
    color: #000;
}

function fraseAleatoria() {

    $.get("http://localhost:3000/23frases", trocaFraseAleatoria)
    .fail(function() {

        $("#erro").fadeIn(1000);

        $(".icon-close").click(function() {

            var closeBtn = $("#erro").fadeOut(1000);

            setTimeout(function() {

                closeBtn.toggle();

            }, 1000);

        });

    });

}