JSFiddle - React, Tailwind, and code Playground

HTML

<div class="answer d-flex">
  <img src="img/plus.svg" alt="">
  <div class="answer-body">
    <p class="answer-title">Title</p>
    <p class="answer-desc">Description Description Description Description  Description  Description  Description  Description  Description  Description  Description  Description  Description  Description  Description  Description </p>
  </div>
</div>

CSS

body {
background: black;
}
.answers {
  position: relative;
  left: 16vw;
  top: 5vw;
  margin-bottom: 2vw;
}

.answer {
  background: #FF1469;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  border-radius: 19px;
  width: 580px;
  height: 80px;
  margin-right: 5vw;
  cursor: pointer;
  transition: 0.4s;
}

.answer-active {
  height: 190px !important;
}

.answer-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 500px;
  color: white;
  line-height: 138.4%;
}

.answer img {
  width: 1.3vw;
  position: relative;
  left: 1.5vw;
  top: 0vw;
}

.answer-title {
  position: relative;
  left: 3vw;
  font-weight: 500;
  top: 0vw;
  font-size: 1.5vw;
}

.answer-desc {
  position: relative;
  color: white;
  top: 1vw;
  left: 3vw;
  width: 400px;
  font-weight: 300;
  display: none;
  transition: 0.4s;
  font-size: 2vw;
}

.answer-desc-active {
  display: block !important;
}

JavaScript

$('.answer').click(function() {
        var $this = $(this);
        $(this).toggleClass('answer-active');
        var $ans= $this.find('.answer-desc');
        if($ans.hasClass('answer-desc-active')){
        $ans.removeClass('answer-desc-active')
        }
        else{
        setTimeout(function() {
            $ans.addClass('answer-desc-active');
        }, 400); 
        }
    });