JavaScriptの.scrollHeightでコンテンツをもっと見る・閉じるで開閉

element.style.height = content.scrollHeight + 'px';

<div id="readMoreBlock">
<div class="readMoreInner">
    <div class="readMoreContainer">
        <p>日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらはこれに反する一切の憲法、法令及び詔勅を排除する。</p>
        <p>日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。</p>
    </div>
    <button class="readMoreBtn">もっと見る</button>
</div>
<div class="readMoreInner">
    <div class="readMoreContainer">
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風。</p>
    </div>
    <button class="readMoreBtn">もっと見る</button>
</div>
</div>

const readmore = document.querySelectorAll('.readMoreInner');

Array.from(readmore).forEach(function(more){

  const btn = more.querySelector('.readMoreBtn');
  const content = more.querySelector('.readMoreContainer');

  // ボタンクリックでイベント処理
  btn.addEventListener('click', () => {
    if(!content.classList.contains('show')){
      content.style.maxHeight = content.scrollHeight + 'px';
      content.classList.add('show');
      btn.innerText = '閉じる';
    } else {
      content.style.maxHeight = '250px';
      content.classList.remove('show');
      btn.innerText = 'もっと見る';
    }
  });
});

#readMoreBlock {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  gap: 35px;
}

.readMoreInner {
  width: 100%;
  margin: 0 auto;
  padding: 25px 30px;
  border-radius: 3px;
  box-sizing: border-box;
  background: #FFF;
}
.readMoreContainer {
  position: relative;
  height: auto;
  max-height: 250px;
  overflow: hidden;
  transition: max-height 0.6s;
}
.readMoreContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: 1s;
  background: linear-gradient(to bottom, transparent 40%, #ffffff 100%);
  pointer-events: none;
}
.readMoreContainer.show:after {
  z-index: -1;
  opacity: 0;
}
.readMoreBtn {
  display: block;
  margin: 0 auto;
  padding: 8px 40px;
  border: 0;
  color: #ffffff;
  background-color: #00c2bc;
  cursor: pointer;
}

.readMoreContainer p:last-child {
    margin-bottom: 10px;
}