JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>

<div class="product-suggestion-form-container">
  <span class="form-title">Product Suggestion Form</span>
  <span class="arrow"><i class="fas fa-caret-down"></i></span>
  <span class="arrow hidden"><i class="fas fa-caret-up"></i></span>
</div>

CSS

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

.hidden {
  display: none;
}

JavaScript

$(document).ready(function() {
  $(".product-suggestion-form-container").click(function() {
    $(this).find(".arrow").toggle();
  })
});