JSFiddle - React, Tailwind, and code Playground

HTML

<blockquote class="bigtext">
    <p class="title"><b>Step 1</b><hr class="style1"/></p>
            <p></p>
            <p></p>   
</blockquote>
<p class="expand"><i class="fa fa-arrow-down"></i> Click to Read More <i class="fa fa-arrow-down"></i></p>
<p class="contract hide"><i class="fa fa-arrow-up"></i> Click to Hide <i class="fa fa-arrow-up"></i></p>

CSS

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
hr.style1 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
p {
  display: block;
  font-size: 0.85em !important;
  line-height: 1.3em;
  margin-bottom: 22px;
}
.title{
    color:#424242;
    font-size: 1.5em !important;
}
/** page structure **/
#wrapper {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}
#photo {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
#photo img {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  border: 5px solid #fff;
  box-shadow: 2px 0 7px #aaa;
}
.bigtext {
  display: block;
  overflow: hidden;
  color: #787878;
}
.expand, .contract {
  cursor: pointer;
  font-weight: bold;
  padding: 15px 0;
  text-align: center;
  color: #555;
}
.expand:hover, .contract:hover {
  color: #121212;
}
.hide {
  display: none;
}

JavaScript

$(function(){
  var animspeed = 950; // animation speed in milliseconds
  var $blockquote = $('.bigtext');
  var height = $blockquote.height();
  var mini = $('.bigtext p').eq(0).height();
  $blockquote.attr('data-fullheight',height+'px');
  $blockquote.attr('data-miniheight',mini+'px');
  $blockquote.css('height',mini+'px');
  $('.expand').on('click', function(e){
    $text = $(this).prev();
    $text.animate({
      'height': $text.attr('data-fullheight')
    }, animspeed);
    $(this).next('.contract').removeClass('hide');
    $(this).addClass('hide');
  });
  $('.contract').on('click', function(e){
    $text = $(this).prev().prev();
    $text.animate({
      'height': $text.attr('data-miniheight')
    }, animspeed);
    $(this).prev('.expand').removeClass('hide');
    $(this).addClass('hide');
  });
});