JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
    <header id="page-header">
        This is my header
    </header>
    <main class="form-container">
        <form class="booking-form">takes up 100% horizontally</form>
        <div class="col-wp">
            <div class="selection">takes up about 80% horizontally</div>
            <div class="booking-detail">
                <div id="booking-detail-content">
                    takes up about 20% horizontally
                </div>
            </div>
        </div>
    </main>
    </body>
</html>

CSS

* {
    box-sizing: border-box;
    color: #fff;
    padding: 0;
    margin: 0;
}

html, body {
    display: block;
    width: 100%;
    background: black;
    height: 200%;
}

#page-header {
    background: blue;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.form-container {
    display: flex;
    flex-direction: column;
    position: sticky;
}

.form-container .booking-form {
    background: red;
    height: 250px;
}

.form-container .col-wp {
    height: 500px;
    overflow: hidden;
}

.form-container .col-wp .selection {
    background: green;
    float: left;
    width: 80%;
    height: 100%;
}

.form-container .col-wp .booking-detail {
    width: 20%;
    height: 100%;
    float: right;
}

#booking-detail-content {
    background: orange;
    z-index: 1;
}

#booking-detail-content.fixed {
    position: fixed;
    top: 100px;
}

JavaScript

window.onload = function() {
    var pageHeaderElem = document.getElementById("page-header");
    var bookingDetailElem = document.getElementsByClassName("booking-detail")[0];
    var bookingDetailContentElem = document.getElementById("booking-detail-content");

    function checkBookingDetailContent() {
        bookingDetailContentElem.style.width = bookingDetailContentElem.parentElement.offsetWidth + 'px';
        bookingDetailContentElem.style.height = bookingDetailContentElem.parentElement.offsetHeight + 'px';
        if(bookingDetailElem.getBoundingClientRect().top < pageHeaderElem.offsetHeight) {
            if(!bookingDetailContentElem.classList.contains("fixed")) {
                bookingDetailContentElem.classList.add("fixed");
            }
        } else {
            bookingDetailContentElem.classList.remove("fixed");
        }
    }
    window.addEventListener("scroll", checkBookingDetailContent);
    window.addEventListener("resize", checkBookingDetailContent);
    checkBookingDetailContent();
}