JSFiddle - React, Tailwind, and code Playground

HTML

<div class="to-read-more">
  <span>
    ლორემ ორნათუს ფაცილისის მალუისსეთ ფერ ეთ. იუს სინთ ფრობო ეხ.
    ცუ ყუი იმფერდიეთ ნეცესსითათიბუს, ეხ ათყუი სინგულის რეფრეჰენდუნთ დუო. ეთ ელით სემფერ ველ, ორნათუს ფაცილისის მალუისსეთ ფერ ეთ. იუს სინთ ფრობო ეხ, ნეც ფერრი ნოვუმ ინთერესსეთ ეი.
    </span>
</div>

<div class="to-read-more">
    hello.
</div>

CSS

.readmore {
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}

.readmore .readmore-content {
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.readmore .readmore-check {
  display: none;
}

.readmore .readmore-label {
  border-top: 1px solid #ccc;
  width: 100%;
  text-align: center;
  display: block;
  cursor: pointer;
}

.readmore .readmore-label-caret {
  transition: transform 0.5s ease-in-out;
  transform: rotate(90deg);
  position: absolute;
  left: 50%;
}

.readmore .readmore-check:checked ~ .readmore-content {
  max-height: inherit!important;
  overflow: auto;
}

.readmore .readmore-check:checked ~ .readmore-label .readmore-label-caret {
  transform: rotate(270deg);
}

JavaScript

var text = "ლორემ იფსუმ დოლორ სით ამეთ, იუს ფროფრიაე ფჰაედრუმ ათ, მელ ეი ნულლა თამყუამ ფერსეყუერის. ცუ ყუი იმფერდიეთ ნეცესსითათიბუს, ეხ ათყუი სინგულის რეფრეჰენდუნთ დუო. ეთ ელით სემფერ ველ, ორნათუს ფაცილისის მალუისსეთ ფერ ეთ. იუს სინთ ფრობო ეხ, ნეც ფერრი ნოვუმ ინთერესსეთ ეი.";


var text2 = "";

makeReadMore(".to-read-more", {
  heightOpened: 200,
  heightClosed: 100
});

function makeReadMore(selector, options) {
  options = options || {};

  var elContainers = selector instanceof Node ? [selector] : document.querySelectorAll(selector);

  for (var i=0, iL = elContainers.length; i < iL; i++) {
    var elContainer = elContainers[i];


    var rect,
      id = Math.random().toString(36),
      cEl = function(x) {
        return document.createElement(x);
      },
      elReadMore = cEl("div"),
      elCheckbox = cEl("input"),
      elContent = cEl("div"),
      elLabelMore = cEl("label"),
      elLabelCaret = cEl("div");

    if (options.content) {
      if (options.content instanceof Node) {
        elContent = options.content;
      } else {
        elContent.innerHTML = options.content;
      }
    } else {
      elContent = elContainer.querySelector("*");
      if(!elContent){
        var elContent = cEl("div");
        elContent.innerHTML = elContainer.innerHTML;
        elContainer.innerHTML="";
    }
    }
    if(!elContent){
      throw "no content found";
    }

    elReadMore.className = "readmore";
    elCheckbox.className = "readmore-check";
    elContent.className = "readmore-content";
    elLabelMore.className = "readmore-label";
    elLabelCaret.className = "readmore-label-caret";

    elCheckbox.id = id;
    elCheckbox.setAttribute("type", "checkbox");
    elCheckbox.setAttribute("role", "button");
    elLabelMore.setAttribute("for", id);
    elLabelCaret.innerText = ">";

    elReadMore.appendChild(elContent);
    elContainer.appendChild(elReadMore);
    rect = elReadMore.getBoundingClientRect();

    if (rect.height > options.heightClosed) {
     ...