JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<div class="readmore">
  <input id="readmore-check1" class="readmore-check" type="checkbox">
  <div class="readmore-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus dolor. Donec at arcu vel nisi tempor faucibus sit amet in erat. Sed sapien eros, tempor sit amet nisi vitae, lacinia molestie dolor. Nam id nibh quis diam dignissim fringilla. Lorem
    ipsum dolor sit amet, consectetur adipiscing elit. Nunc id maximus massa, et mollis purus. Nulla arcu purus, mollis consequat varius in, sagittis et quam. Duis eu orci eu nibh convallis maximus. Donec mollis pellentesque justo id ultrices. Fusce lobortis
    est sed quam eleifend molestie a pulvinar nisl. Mauris gravida arcu id volutpat eleifend. Etiam auctor vehicula libero ac vulputate. Maecenas vel neque et justo porta dictum non eget sapien. Ut lobortis nisi vel nisl condimentum euismod.
  </div>
  <div class="readmore-label">
    <label for="readmore-check1"></label>
  </div>
</div>

<div class="readmore">
  <input id="readmore-check2" class="readmore-check" type="checkbox">
  <div class="readmore-text">
    Pellentesque vitae est lacinia, varius magna vel, tincidunt tortor. Fusce sagittis pharetra nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur facilisis euismod malesuada. Nam sit amet rutrum elit. Duis tortor eros, fermentum eget sem viverra, luctus tempus dui. Donec laoreet velit ac velit condimentum, sit amet laoreet orci lacinia. Cras tempus lacus arcu, vel posuere massa scelerisque a. Donec mollis, nunc eleifend elementum molestie, tortor est dictum nunc, a laoreet turpis sapien non ex. Aliquam at tristique mauris.
  </div>
  <div class="readmore-label">
    <label for="readmore-check2"></label>
  </div>
</div>

<div class="readmore">
  <input id="readmore-check3" class="readmore-check" type="checkbox">
  <div class="readmore-text">
    There is no way there is enough text here to take up 80 pixels of height, oh no! That means the button is...

CSS

body {
  margin: 0;
  font-family: 'Roboto', 'Noto', sans-serif
}

.readmore {
  margin: 1em auto;
  max-width: 525px;
  width: 100%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
}

.readmore-check {
  display: none
}

.readmore-text {
  max-height: 80px;
  padding: 16px;
  padding-bottom: 0px;
  text-align: justify;
  overflow: hidden
}

.readmore .readmore-label {
  padding: 8px 16px;
  text-align: right
}

.readmore .readmore-label label {
  cursor: pointer
}

.readmore .readmore-label label:hover {
  color: #2196F3
}

.readmore .readmore-label label::after {
  content: "Show more..."
}

input:checked~.readmore-text {
  max-height: none
}

input:checked~.readmore-label label::after {
  content: "Show less..."
}