JSFiddle - React, Tailwind, and code Playground

HTML

<div class="unknownHeight">
    <div class="background-top"></div>
    <div class="background-mid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus nisi eget dui pharetra, nec mollis magna vulputate. Praesent malesuada justo quam, ac tincidunt dolor luctus non. Phasellus bibendum nisi in ante tempor tempor. Praesent faucibus ipsum arcu, eu ullamcorper neque dignissim non. Suspendisse id dapibus quam. Integer viverra at velit sit amet ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet risus sagittis blandit auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut iaculis, ipsum quis varius efficitur, turpis justo tincidunt ipsum, commodo sagittis eros dolor sit amet ante. Phasellus id diam dictum, tristique leo vitae, feugiat lacus.

Ut id sollicitudin diam, porttitor sagittis enim. Nullam ornare ipsum erat, et commodo massa lacinia id. Fusce vitae vulputate purus, eu tincidunt dolor. Duis cursus eros aliquet, eleifend nunc finibus, pretium quam. Aliquam sed lobortis neque. Pellentesque vitae sollicitudin nunc. Phasellus pellentesque ultrices odio.

Aenean ornare nisi enim, eget porta quam vestibulum at. Aliquam consequat, ex vitae feugiat tristique, enim odio convallis metus, at sodales arcu diam id nunc. Morbi vitae leo metus. Nam at diam nec neque laoreet condimentum. Pellentesque malesuada maximus leo. Nunc at libero et neque egestas ornare. Integer dui neque, accumsan eget semper nec, imperdiet vel ligula. Duis facilisis varius lorem vehicula condimentum. Aenean sed nunc ac tellus posuere tempor quis accumsan turpis.

Mauris iaculis tortor non ornare lobortis. Ut et iaculis lacus. In hac habitasse platea dictumst. Nunc mollis luctus orci, ac tincidunt arcu ornare non. Nullam ac tellus odio. Etiam elementum orci sed massa cursus condimentum. Praesent elementum sollicitudin aliquet. Nullam pretium a leo sed iaculis. Praesent malesuada sagittis erat ac tempus. Nunc...

CSS

div.unknownHeight { 
    margin: 10px 20px 10px;
    border-radius: 5px;
    background-color: black; 
    width: 200px;
    height:100%;
    position: relative;
    border: 3px solid black;
}
div.background-top { 
    width: 200px; height: 20px;
    position: absolute; top: 0; left: 0;
    background-color: red;
    border-radius: 5px 5px 0 0;
}
div.background-mid {
    width: 200px; height: 100%;
    top: 20px;
    bottom: 20px;
    background-color: yellow;
}
div.background-bot {
    width: 200px; height: 20px; 
    position: absolute; bottom: 0; left: 0;
    background-color: blue;
    border-radius: 0 0 5px 5px;
}

JavaScript

$('div.unknownHeight').css('height', Math.random() * 400 + 50);