LCP is defined as the time that it takes to paint the largest content item above the fold.
How do responsive content wrappers fit into that mix? Like say that I have the following structure:
<body>
<div id="wrapper">
<div class="some_above_the_fold_content">
<p>Whatever</p>
</div>
<div class="some_visually_below_the_fold_content">
<p>large content</p>
</div>
</div>
</body>
Visually, the second div is "below the fold", but it is a child element of the main wrapper div, which is "above the fold" since it's the primary page element.
What does LCP compute it's time from? What's visually below the fold (div #2) or the parent div?
In your example, <p>Whatever</p> is the LCP element.
LCP elements are either text, images, or video. The #wrapper element contains a text element - but isn't itself a text element.
As a side note: If a user happens to enter the page at a position further down the document (for example, they are linked to an anchor link that exists partially down the page) it's possible that <p>Large Content</p> would now be above the fold, and therefore the LCP element.