JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <div class="inner">Я абсолютный блок в 30% высоты</div>
    Я тестовый блок, у которого не задана высота.
    <br><br><br><br><br><br><br>
</div>

<button>Добавить переносов</button>

CSS

.test {
    position: relative;
    padding: 5px;
    border: red 3px solid;
    background: pink;
}

.inner {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    height: 30%;
    padding: 5px;
    background: lightgreen;
    border: green 3px solid;
}

JavaScript

$('button').on('click', function() {
    $('.test')[0].innerHTML += '<br><br><br><br>';
});