JSFiddle - React, Tailwind, and code Playground

HTML

<p class="container">
    <input type="checkbox" id="toggle-input"> <span class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, labore et dolore magna deserunt mollit anim id est laborum.
  </span>

    <label id="toggle-label" for="toggle-input"></label>
</p>

CSS

.container {
    position: relative;
}
.container .ellipsis {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 5ch);
}
.container #toggle-label {
    color: blue;
    cursor: pointer;
    display: inline;
    font-weight: normal;
    margin-left: 5px;
}
.container #toggle-label::after {
    border-bottom: 1px dotted blue;
    content:"more";
    position: absolute;
    top: 0;
}
.container #toggle-input {
    display: none;
}
.container #toggle-input:checked ~ #toggle-label::after {
    content:"less";
    position: relative;
}
.container #toggle-input:checked ~ .ellipsis {
    display: inline;
    overflow: visible;
    text-overflow: inherit;
    white-space: inherit;
}