JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body id="test">
    </body>
</html>

CSS

.scrollH {
    position: absolute;
    height:15px;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index:50;
}

/* Start & End - Buttons */
.scrollH .start {
    background:yellow;
    background-repeat: no-repeat;
    background-position: -180px -0px;
    width:15px;
    height:15px;
}

.scrollH .start.disabled {
    background:darkyellow;
    background-repeat: no-repeat;
    background-position: -240px -0px;
    width:15px;
    height:15px;
}
.scrollH .end {
    background:yellow;
    background-repeat: no-repeat;
    background-position: -210px -0px;
    width:15px;
    height:15px;
}

.scrollH .end.disabled {
    background:darkyellow;
    background-repeat: no-repeat;
    background-position: -270px -0px;
    width:15px;
    height:15px;
}
/* Scroll Area */
.scrollH .empty { /* Main Container */
    position:relative;
    height:15px;
}
.scrollH .emptyStart {
}
.scrollH .empty {
    background-repeat:repeat-x;
    background:lightgreen;
    position:relative;
    padding:0px;
    margin:0px;
    width:100%;
    height: 15px;
}

.scrollH .space {
    width:10px;
}
.scrollH .emptyEnd {
}
.scrollH { /* contains ScrollBar */
    position:absolute;
}

/* ScrollBar */
.scrollH .bar {
    width:30px;
}
.scrollH .bar .start {
    /*background-repeat:repeat-y;*/
    background:green;
    background-repeat: no-repeat;
    background-position: -300px -0px;
    position:relative;
    float: left;
    width: 0px;
    height: 15px;
    margin: 0px;
    padding: 0px;
}
.scrollH .bar .scroll {
    background-repeat:repeat-x;
    background:green;
    position:relative;
    float: left;
    left:100%;
    height:15px;
    padding:0px;
    margin:0px;
}
.scrollH .bar .end {
    color:green;
    background:green;
    background-position: -330px -0px;
    position:relative;
    float: left;
    width: 0px;
    height: 15px;
    margin: 0px;
    padding: 0px;
}

JavaScript

obj = {};
  function applySize() {
    var my = obj.my;
    var size = obj._size;
    if(obj._direction) {
      my.self.width(size + "px");
      my.space.width(my.self.width() - my.bUL.width() - my.bDR.width() + "px");
      my.space.children("[class='space']").width(my.space.width() - my.space.children('[class="start"]').width() - my.space.children("[class='end']").width() + "px");
      if(my.bar.width() > my.space.width() || obj._maxVal === 0) {
        my.bar.width(my.space.width() + "px")
      }
      my.bar.children("[class='scroll']").width(my.bar.width() - my.bar.children("[class='start']").width() - my.bar.children("[class='end']").width() + "px")
    }else {
      my.self.height(size + "px");
      my.space.height(size - my.bUL.height() - my.bDR.height() + "px");
      my.space.children("[class='space']").height(my.space.height() - my.space.children('[class="start"]').height() - my.space.children("[class='end']").height() + "px");
      if(my.bar.height() > my.space.height() || obj._maxVal === 0) {
        my.bar.height(my.space.height() + "px")
      }
      my.bar.children("[class='scroll']").height(my.bar.height() - my.bar.children("[class='start']").height() - my.bar.children("[class='end']").height() + "px")
    }
  }

function createView(args) {
    var complete = jQuery("<div>").addClass("scrollH").appendTo("#test");

    var buttonUL = jQuery("<div>").addClass("start").appendTo(complete);
    var wholeSpace = jQuery("<div>").addClass("empty").appendTo(complete);
    var spaceStart = jQuery("<div>").addClass("emptyStart").appendTo(wholeSpace);
    var space = jQuery("<div>").addClass("space").appendTo(wholeSpace);
    var spaceEnd = jQuery("<div>").addClass("emptyEnd").appendTo(wholeSpace);
    var barScroll = jQuery("<div>").addClass("bar").css("position", "absolute").appendTo(wholeSpace);
    var barStart = jQuery("<div>").addClass("start").appendTo(barScroll);
    var scroll = jQuery("<div>").addClass("scroll").appendTo(barScroll);
    var...