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">
                                    <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>
                                    </div>
                                    <div class="inner2">
                                        <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>
                                    </div>
                     ...

CSS

.company {
  padding-top: 160px;
  color: #000;
}

.companyDescription {
  margin: 20px 0 10px 0;
  overflow:hidden;
}

.outer{
  width:100%;
  height:280px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
  overflow:hidden;/*ONLY ONE NEW CSS LINE!*/
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;

}

JavaScript

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