Use plain text, not paragraphs, and a text-link for the dots. That is because you need to give them IDs - which is not so easy inside a paragraph.
The container .more-less-holder has a width limitation of max 800px, but you may well change that to fit your needs.
If you happen to need more than one instance of this component on a site, the second downloadable file shows the changes you need to make to the IDs, the styles, the attribute and the script. There are two 'units' in the second package. The first one is identical to the first package here, the second one has got a '2' or '-2' appended to everything that needs to be changed. And for the possible 3rd instance, just swap all those '2's with '3'... and so on. The units can be moved out of the outer container, .more-less-all and placed where they are wanted.
On request we created an easier component, which uses no js. Instead it uses the 'target' pseudo element. This one also has two units that can be taken out of the holding container .container-outside and placed where needed. You just have to give the .read-wrapper different IDs. To edit the text, remove the height of the container .read-wrapper temporarily by setting it to auto. Remember to set it back when done.