JSFiddle - React, Tailwind, and code Playground

HTML

<div class="questions-answer-block">
    <p class="question">This is a Question?</p>
    <p id="answer" class="hideinit">Here is the Answer</p>
</div>
<div class="questions-answer-block">
    <p class="question">This is a Question?</p>
    <p id="answer" class="hideinit">Here is the Answerdadawdawdawdawdawdawdawdwadawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawdawd</p>
</div>

CSS

.questions-answer-block {
    text-align: left;
    margin-left: 25px;
}
.questiaon {
    cursor: pointer;
}
.hideinit {
    display: none;
}
.display {
    display: inline-block;
}

JavaScript

$(".question").click(function (argument) {
    if(document.getElementById("answer").className.match(/(?:^|\s)hideinit(?!\S)/)) {
        document.getElementByID("answer").className = "display";
    }

});