JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <div id="main-container" class="wrapper">
            <div id="main" >
                <div class="commentWrapper" id="commentWrapper">
                    <div class="block aside" id ="comment">
                        <aside>
                        
                            <div class="nui">
                            
                            </div>
                        
                            <form class="form">
                                <fieldset class="businessapproaches">
                                    <input type="checkbox" id="ba_all" name="ba_all" />
                                    <label for="ba_all">Business Approach</label><br>
                                </fieldset>
                                <fieldset class="snapshot">
                                    <input type="checkbox" id="ss_all" name="ss_all" />
                                    <label for="ss_all">Snapshot</label><br>
                                </fieldset>
                                <fieldset class="workexperience">
                                    <input type="checkbox" id="workexperience_all" name="workexperience_all" />
                                    <label for="workexperience_all">Work Experience</label><br>
                                    <label for="startdate">Start Date</label>
                                    <input id="startdate" name="startdate" type="text" value="" />
                                    <label for="enddate">End Date</label>
                                    <input id="enddate" name="enddate" type="text" value="" />
                                </fieldset>
                                 <fieldset class="ds"><legend>Work Selector</legend><br> 
                                    <label for="valueAA" class="dsl">From:</label>
                                    <select name="valueAA" id="valueAA">
                                        <optgroup label="2003">
              ...

CSS

.block {
    display: inline-block;
    padding: 5px 5px 5px;
    margin: 5px 5px;
}

.gc {
    width:70%;
    float: left;
    border: 1px solid #F16529;
}
.aside {
    width: 25%;
    float: right;
    font-size: 11px;
}

#commentWrapper { 
  float:right;
  margin-left: 10px;
  margin-right: 10px;
  left: 450px;
  width: 25%;
}

#comment {
  position: absolute;
  top: 0;
  /* Can include margins in the sliding effect here */
}

#comment.fixed {
  position: fixed;
  top: 0;
}

#main aside article {
    float:left;
    width:25%;
}

JavaScript

var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
$(window).scroll(function(event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
});