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;
  font-size: 2vw;
}

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

JavaScript

$('.answer').click(function() {
        var $this = $(this);
        $(this).toggleClass('answer-active');
        
      $this.find('.answer-desc').toggle('answer-desc-active');
        
    });