JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="FR" lang="FR">
<head>
    <style>
        body, html{
            width : 100%;                
            margin : 0;
            padding : 0;
        }
        #container{
            width:320px;
            background-color:#ff4444;
        }
        .expand{
            width:100%;
            background-color:#44ff44;                
        }
    </style>
</head>
<body>
<div id="container">
    content

    <p class="expand">
        groscaca<br />groscaca<br />groscaca<br />groscaca<br />groscaca<br />groscaca<br />groscaca<br />
    </p>
        content content content content content content        content content        content content        content content        content content        content content

</div>
</body>

JavaScript

var expandCount = 0;
$('.expand').each(function(){
    var that = $(this);
    expandCount++;
    $('<a/>').insertBefore(
        that
            .attr({
                id:'expand'+expandCount
            })
            .css({
                top:that.offset().top,
                position:'absolute',
            })
        )
        .attr({
            href:'#expand'+expandCount
        })
        .css({
            display:'block',
            height:that.outerHeight(true),
        });
});