JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<label for="button">Read more...</label>
<input type="checkbox" id="button">
<div class="xpandable-block"><p>Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem..... Lorem.....</p></div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.xpandable-block {
  height: 55px;
  overflow: hidden;
  order: 0;
}
.xpand-button {
  order: 1;
}
input[type="checkbox"] {
 display: none;
}
input[type="checkbox"]:checked + .xpandable-block {
  height: auto;
}
label {
  order: 1;
  color: blue;
  text-decoration: underline;
  font-size: 18px;
  cursor: pointer;
}