JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="cardLessContent">
    <h1>Here is a card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
  </div>
  <div id="cardMoreContent" class="cardMoreContent">
    <p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
  </div>
  <button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>

<div class="card">
  <div class="cardLessContent">
    <h1>Here is a card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
  </div>
  <div id="cardMoreContent" class="cardMoreContent">
    <p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
  </div>
  <button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>

<div class="card">
  <div class="cardLessContent">
    <h1>Here is a card</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
  </div>
  <div id="cardMoreContent" class="cardMoreContent">
    <p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
  </div>
  <button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>

CSS

.card {
  width: 33%;
  color: #2d3047;
  display: flex;
  font-family: 'Raleway', sans-serif;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 auto;
  margin-bottom: 2em;
  border: 1px solid #2d3047;
  border-radius: 10px;
  position: relative;
  text-align: justify;
}

.cardLessContent *,
.cardMoreContent * {
  margin: 0;
  padding: 10px;
}

.cardLessContent,
.cardMoreContent {
  flex-grow: 1;
  flex-shrink: 1;
}

.cardMoreContent {
  display: none;
}

.cardMoreContent.showing {
  display: block;
}

.toggleContent {
  background: #404b9e;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  cursor: pointer;
  height: 25px;
  width: 10%;
  margin: 10px;
}

JavaScript

const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");

var toggleContent = function() {
    cardMoreContent.classList.toggle("showing");
    this.classList.toggle("toggledOff");

    if(this.classList.contains("toggledOff")) {
      this.innerHTML = "More";
    }
    else {
      this.innerHTML = "Less";
    }
}



for (var i = 0; i < btnToggleContent.length; i++) {
  btnToggleContent[i].addEventListener("click", toggleContent);
}