JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" onclick="growDiv()" value="Read more" id="more-button">

<div id='grow'>
    <div class='measuringWrapper'>
        <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
    </div>
</div>

CSS

#more-button{border-style:none;background:none;font:16px Serif;color:blue;margin: 0 0 10px 0;}

#grow input:checked{color:red;}

#more-button:hover{color:black;}

#grow {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    overflow: hidden;
  }

JavaScript

function growDiv() {
    var growDiv = document.getElementById('grow');
    if (growDiv.clientHeight) {
      growDiv.style.height = 0;
    } else {
      var wrapper = document.querySelector('.measuringWrapper');
      growDiv.style.height = wrapper.clientHeight + "px";
    }
document.getElementById("more-button").value=document.getElementById("more-button").value=='Read more'?'Read less':'Read more';
}