JSFiddle - React, Tailwind, and code Playground

HTML

<div class="teaser">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>

<div class="complete"> this is the 
complete text being shown</div>

<span class="more">more...</span>

CSS

.complete{
    display:none;
}

.more{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
    float: right;
}
.teaser {
  height: 20px;
  width: 60%;
  overflow: hidden;
}

JavaScript

$(".more").toggle(function(){
    $(this).text("less..").siblings(".complete").show();    
}, function(){
    $(this).text("more..").siblings(".complete").hide();    
});