JSFiddle - React, Tailwind, and code Playground

HTML

<div class="faqs">
  
  <div class="faq">
    <div class="faq_header">
      <h3><span title="Question">Q</span> What the what?</h3>
      <div class="faq_arrow"></div>
    </div>
    <div class="faq_content">
      <p><b><i>Answer</i>:</b> Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.</p>
    </div>
  </div>
  
  <div class="faq">
    <div class="faq_header">
      <h3><span title="Question">Q</span> What the what?</h3>
      <div class="faq_arrow"></div>
    </div>
    <div class="faq_content">
      <p><b><i>Answer</i>:</b> Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.</p>
    </div>
  </div>
</div>

SCSS

a {
  color: #C0392B;
  
  &:hover {
    color: #E74C3C;
  }
}

.faqs {
  padding: 20px;
  margin: 20px;
  background: #F1F1F1;
  box-shadow: inset 0 1px #FFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
}

.faq {
  margin-bottom: 20px;
  background: #DDD;
  border-radius: 3px 3px 0 0;
  
  &:last-of-type {
    margin-bottom: 0;
  }

  // header
  &_header {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    background: #D1D1D1;
    box-shadow: 0 1px #E1E1E1;
    border-bottom: 1px solid #333;
    border-radius: 3px 3px 0 0;
    position: relative;
    
    h3 {
      margin: 0;
      color: #333;
      
      // Q icon
      span {
        display: inline-block;
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 5px;
        background: linear-gradient(#E67E22, #D35400);
        box-shadow: inset 0 1px #F39C12;
        border: 1px solid #E67E22;
        border-radius: 50%;
        color: #FFF;
        line-height: 29px;
        text-align: center;
        text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
      }
    }
  }

  &:nth-of-type(2n) &_header {
    background: #C1C1C1;
  }

  // expand/collapse arrow
  &_arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  &--open &_arrow {
    background: blue;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  // content
  &_content {
    height: 0;
    overflow: hidden;

    p {
      padding: 0 20px;
      margin: 20px 0 0 0;
    }

    p:last-of-type {
      padding: 0 20px 20px 20px;
    }
  }
}

JavaScript

var openClass = 'faq--open';
$('.faqs').on('click', '.faq_header', function() {
	var el = $(this).closest('.faq').toggleClass(openClass),
		  content = el.find('.faq_content'),
  		shouldOpen = el.hasClass(openClass);
  content.animate({ height: getTargetHeight(content, shouldOpen) }, 250);
});

// http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height
function getTargetHeight(el, shouldOpen) {
  if (shouldOpen) {
  	var currentHeight = el.height(),
    		autoHeight = el.css('height', 'auto').height();
    el.height(currentHeight);
		return autoHeight;
  }
  return 0;
}