JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MainContainer" style="width: 1000px;">
    <div class="PropertyContainer" style="height: 400px;">
        <div class="PanelHeader" style="text-align: center; margin: 0px; background-color: rgb(248, 248, 248);">
            Options</div>
    </div>
    <div class="FormWrapper" style=" height: 2000px">
        <div class="PanelHeader" style="text-align: left;">
            &nbsp;&nbsp;Design area
        </div>
        <div class="FormContainer ui-sortable">
        </div>
    </div>
</div>

CSS

.FormContainer *:focus {outline: thin solid black;}
.PropertyContainer *:not(div):not(span):focus {outline: thin solid black;} 

 .watermark
{
color: #999;
font-family: Arial;
font-size: 13px;
font-style:normal;
}

.MainContainer
{
height:480px;
text-indent: auto;
background-color: white;
}

.PanelHeader
{
    padding-top:4px;
    padding-bottom:5px;
    text-align:center;
    background: url(../../Images/bgNav.gif) repeat-x 0 100%;
    color:Gray;
}

.ControlContainer
{
    color: gray;
    font-size:13px; 
    float:left;
    margin-left:13px;
    padding-top:2px;
}

.ControlContainer div
{
    width:101px;
    margin-top:2px;
    border:1px solid transparent;
    display:inline-block;
    float:left;
}
.ControlContainer div a
{
    padding:3px 3px 3px 20px;
    display:inline-block;
    border:1px solid transparent;
}

.ControlContainer div a:hover
{
    cursor: move;
    color: #003366;
     background: rgba(255,255,255,.2);
     background-clip: padding-box;
    border: 1px solid #CCC;
    border-radius: 2px;
    box-shadow:0 0 1px rgba(255,255,255,.8),0 1px 1px rgba(0,0,0,.5),0px 1px 0 white inset,0px 0px 0 rgba(0,0,0,.8) inset;
}

.FormWrapper
{
    color:Gray;
    float:left;
    min-height:100%;
    height:auto;
    width:81.66%;
    border: 1px solid #E0E0E0;
    -border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    overflow:visible;
    padding-bottom:2px;
}

.FormContainer
{
    color:Black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:100%;
    min-height:454px;
    height:auto;
    padding-bottom:5px;
    background-color:White;
    float:left;
}

.FormContainer div.ui-draggable
{
    float:left;
}

.FormContainer div.MainDiv
{
    position:relative;
    width:99.20%;
    float:left;
    margin:30px 3px 0px 3px;
    padding:10px 0px 10px 0px; 
    text-align:left;
   ...

JavaScript

var div = $('.PropertyContainer');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        var height = $(div).height();
        $(div).css('position', ((p) > start) ? 'fixed' : 'static');
        $(div).css('top', ((p) > start) ? '0px' : '');
        $(div).css('min-height', ((p) > start) ? '336px' : '70%');
        $('.FormWrapper').css('margin-left', ((p) > start) ? '181px' : '');
    });