JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper left">
    <p>asd</p>
    
    <div class="footer">footer</div>
</div>

<div class="wrapper right">
    <p>asd</p>
    
    <div class="footer">footer</div>
</div>

CSS

.wrapper {
    background: #ece;
    float: left;
    height: 500px;
    margin-bottom: 300px;
    width: 50%;
    /* implied position: static, by browser default */
}

.right {
    background: #eec;
    position: relative;
}

.footer {
    background: #cee;
    bottom: 0;
    position: absolute;
    width: 100%;
}