Check out this HTML code snippet: https://jsfiddle.net/1t68bfex/
button {
position: relative;
top: 100px;
left: 150px;
max-top: 10px;
}
.third-party-block {
//display: none;
}<div style="border:1px solid red;">
<button>
The text from the left is beautiful
</button>
<div class="third-party-block">
<p>
some text comes here
</p>
<p>
some text comes here
</p>
<p>
some text comes here
</p>
<p>
some text comes here
</p>
</div>
</div>The issue at hand involves a dynamic element "third-party-block" that affects the button's position. If not displayed, the button should remain near the top, adjusting its position if necessary due to parent height constraints.
I'm seeking a Pure CSS solution akin to a max-width property for width but applicable in my scenario.