JSFiddle - React, Tailwind, and code Playground

HTML

<div class="posts">
<div class="post-teaser">
  <span>
      <header>
        <h1>
            Title 1
        </h1>
        <p class="meta">
         Date 1
        </p>
      </header>
      <div class="excerpt truncate">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
          <div class="txtcol"><a>Show More</a></div>
  </span>
</div>

<div class="post-teaser">
  <span>
      <header>
        <h1>
            Title 2
        </h1>
        <p class="meta">
         Date 2
        </p>
      </header>
      <div class="excerpt truncate">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
          <div class="txtcol"><a>Show More</a></div>
  </span>
</div>
</div>

CSS

/* styles for '...' */ 
.truncate {
/* hide text if it more than N lines  */
overflow: hidden;
/* for set '...' in absolute position */
position: relative; 
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em; 
/* fix problem when last visible word doesn't adjoin right side  */
text-align: justify;  
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.truncate:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines 
*/
.truncate:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}

.txtcol a{
  color:blue;
  cursor:pointer;
}
.txtcol a{
  color:blue;
  cursor:pointer;
}

JavaScript

$(document).ready(function(){
  $(".txtcol").click(function(){
    if($(this).prev().hasClass("truncate")) {
            $(this).children('a').text("Show Less");
        } else {
            $(this).children('a').text("Show More");
        }
  $(this).prev().toggleClass("truncate");

  });
});