JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-7 company">
      <h2>this is my title</h2>
      <div class="companyDescription">
        <div class="outer">
          <div class="inner1" id="inner1">
            <article>
              <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                        </h5>
              <h5>Some kind of subtitle</h5>
              <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
            </article>
          </div>
          <div class="inner2">
            <article>
              <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
              <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                        </h5>
              <h5>the last subtitle.</h5>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.company {
  padding-top: 160px;
  color: #000;
}
.companyDescription {
  margin: 20px 0 10px 0;
  overflow: hidden;
}
.outer {
  width: 100%;
  height: 160px;
  top: 0;
  position: relative;
}
.inner1 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}
.inner2 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}

JavaScript

$(function() {
  $('#readMore').click(function() {
    $('.companyDescription').animate({
      scrollTop: $('#inner1').outerHeight() + 30
    }, 1000);
  })
  $('#readLess').click(function() {
    $('.companyDescription').animate({
      scrollTop: 0
    }, 1000);
  })

  var fixWidths = function() {
    var
      $cDesc = $('.companyDescription');
    $cDesc.find('.outer').css(
      'height',
      Math.max(
        $cDesc.find('.inner1').children('article').outerHeight(),
        $cDesc.find('.inner2').children('article').outerHeight()
      ) + 25 // Maximum of the two
    )
  }

  $(window).resize(fixWidths);
  fixWidths();
});