JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.2.0/split.min.js"></script>
 <div class="main">
    <div class="split split-horizontal" id="one" >azeraze</div>
    <div class="split split-horizontal" id="two" >azeraze</div>
    </div>

CSS

html, body {
    height: 100%;
  }

 
  body {
    padding: 8px;
    background-color: #F6F6F6;
    box-sizing: border-box;
  }


  .split {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }



  .content {
    border: 1px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: #fff;
  }

  .gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
  }

  .gutter.gutter-horizontal {
    cursor: col-resize;
    //background-image: url('../grips/vertical.png');
      background-color: grey;
}



  .gutter.gutter-vertical {
    cursor: row-resize;
    //background-image: url('../grips/horizontal.png');
    background-color: lightgrey;
  }



  .split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
  }

.main {
  display: flex;
  height: 100%;

}

#one { backgroudn-color: yellow;  flex-grow: 1; }
#two { background-color: green; flex-basis: 400px; }

JavaScript

Split(['#one', '#two'], {
    //sizes: [25, 75],
    //minSize: 100
    
    elementStyle: function (dimension, size, gutterSize) {
        return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' }
    },
    gutterStyle: function (dimension, gutterSize) {
        return { 'flex-basis':  gutterSize + 'px' }
    }
    
});