Split Layout

Horizontal Splitter Panes
Left Panel
Right Panel
Vertical Splitter Panes:
Top panel
Bottom panel
Copy 
   
   
  <div class="row">
   <div class="page-container">
   <h5 class="custom-card">Horizontal Splitter Panes </h5>
   <div class="panel-container">
      <div class="panel-left resizable" style="transition: all 0s ease 0s; width: 261px;">
         <h5 class="custom-card">Left Panel </h5>
      </div>
      <div class="splitter" style="touch-action: none;">
      </div>
      <div class="panel-right">
         <h5 class="custom-card">Right Panel </h5>
      </div>
   </div>
   <hr>
   <h5 class="custom-card">Vertical Splitter Panes: </h5>
   <div class="panel-container-vertical">
      <div class="panel-top resizable" style="transition: all 0s ease 0s; height: 187px;">
         <h5 class="custom-card">Top panel </h5>
      </div>
      <div class="splitter-horizontal" style="touch-action: none;">
      </div>
      <div class="panel-bottom">
         <h5 class="custom-card">Bottom panel </h5>
      </div>
   </div>
</div>
</div>
Copy 
  
   
                                             
     .panel-container {
        display: flex;
        flex-direction: row;
        border: 1px solid silver;
        overflow: hidden;
        }
      
      .panel-left {
        flex: 0 0 auto;
        padding: 10px;
        width: 300px;
        min-height: 200px;
        min-width: 150px;
        white-space: nowrap;
        background:rgba(28, 52, 84, 0.26);
        color: white;
      }
      
      .splitter {
        flex: 0 0 auto;
        width: 18px;  
        background:
         url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
        min-height: 200px;
        cursor: col-resize;  
      }
      
      .panel-right {
        flex: 1 1 auto;
        padding: 10px;
        width: 100%;
        min-height: 200px;
        min-width: 200px;
        background: #dfe1e6;
      }
      
      
      /* vertical panel */
      
      .panel-container-vertical {
        display: flex;
        flex-direction: column;
        height: 500px;
        border: 1px solid silver;
        overflow: hidden;
      }
      
      .panel-top {
        flex: 0 0 auto;
        padding: 10px;
        height: 150px;
        width: 100%;
        white-space: nowrap;
        background: #838383;
        color: white;
      }
      
      .splitter-horizontal {
        flex: 0 0 auto;
        height: 18px;
        background:
         url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
        cursor: row-resize;
      }
      
      .panel-bottom {
        flex: 1 1 auto;
        padding: 10px;
        min-height: 200px;
        background: #eee;
      }