JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="first">
        
    </div>
    <div class="second"></div>
</div>

CSS

.wrapper {
    position: relative;   
}

.first {
    height: 150px;   
    width: 100%;
    background: orange;
    position: absolute;
    bottom: 0;
}

.second {
    height: 300px;
    padding-bottom: 150px;
    background: green;   
}