JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainBlock">
  <h1>ExanpleMenu</h1>
  <div class="wrapper_block">

    <div class="block1">
      <h2>Item1</h2>
      <ul class="content">
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </li>
      </ul>
      <button type="button" class="btn_showMore">Show more</button>
    </div>

    <div class="block2">
      <h2>Item2</h2>
      <ul class="content">
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate!
        </li>
        <li class="item">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem amet ratione iure, sed voluptate! Lorem ipsum dolor sit amet,...

CSS

.mainBlock {
  width: 100%;
}

h1 {
  font-size: 20px;
}

.wrapper_block {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.content {
  position: relative;
  width: 80%;
  height: 120px;
  min-height: 120px;
  overflow: hidden;
  list-style-type: none;
  border: 1px solid #f00;
}

.content_active {
  height: auto !important;
}

.item {
  width: 100%;
  margin: 5px 0;
  border: 1px solid #333;
}

.item:nth-child(odd) {
  background-color: #ff0;
}

.btn_showMore {
  width: 200px;
  height: 40px;
  margin: 10px auto;
  background-color: #00f;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

JavaScript

$(".content").each(function(i, el) {
      var innerHeight = el.scrollHeight;
      console.log(innerHeight + " = innerHeight");

      $(el).next().toggle(el.scrollHeight > 120).on("click", function() {
        $(el).toggleClass("content_active");
      });

    });