JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”
      <br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”
        <br>
      </p>
  </div>
</div>

CSS

.toggle-content.show {
      display: block;
      transition: left 0.3s linear;
    }
    
    .toggle-content {
      //  position:relative;
      display: none;
      background-color: #eeeeee;
      padding: 1rem;
      margin-right: 1rem;
    }

JavaScript

/* Toggle on course detail sections */
    $(document).ready(function() {
      $('.course-info-toggle').click(function() {
        $('.toggle-content').toggleClass('show');
      });
    });