JSFiddle - React, Tailwind, and code Playground

HTML

<p>Другой текст</p>

<p>
<dl class="spoiler" tabindex="0">
    <dt>Читайте больше...</dt><!-- незачем тут A -->
    <dd><!-- этот блок будет виден только если родительский элемент в фокусе -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula dictum ipsum vitae imperdiet. Aenean sagittis consequat luctus. Maecenas eget lacinia odio. Aenean id viverra felis. Donec enim lacus, rhoncus sollicitudin cursus vitae, faucibus posuere nulla.
    </dd>
</dl>
<p>Другой текст</p>

CSS

dl.spoiler {
    display: block;
    margin:0.5em 0;
}
dl.spoiler > dt {
    display: inline-block;
    cursor: pointer;
    border-bottom:#aaa 1px dotted;
    padding: 0px;
    line-height:1.2em;
}
dl.spoiler > dd {
    display: none;
    margin:0.5em 0 0.5em 2em;
}

/* когда весь блок в фокусе — показываем то что скрыто: */
dl.spoiler:focus dd,
dl.spoiler:active dd {
    display: block;
}
dl.spoiler:focus dt,
dl.spoiler:active dt {
    display: block;
}