JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- FontAwesome CSS -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <aside id="resizable" class="sidebar-left movable-div position-fixed bottom-0 left-0 animated">
        <div class="nano has-scrollbar">
          <nav class="nano-content" tabindex="0" style="right: -17px;">
            <ul class="nav nav-main">
              <li id="dashboard-nav" class="p-0 w-100">
                <div class="sidebar-sticky">
                  <h5 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Locations</span>
                  </h5>
                  <ul class="flex-column">
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        XP-1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        HAB-1
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </nav>
        </div>
        <div class="draghandle" style="width: 6px; height: 100vh;"></div>
      </aside>
      <div id="mainArea" class="content marginLeft...

CSS

aside.sidebar-left#resizable {
   height: 100vh;
   min-width: 200px;
   max-width: 400px;
 }
 
 @media (min-width: 768px) {
   .wrapper .sidebar-left {
     top: 0;
   }
 }
 
 @media (min-width: 1200px) {
   aside.sidebar-left {
     width: 200px;
   }
 }
 
 aside.sidebar-left {
   background-color: yellow;
   width: 175px;
   top: 0;
   float: left;
   z-index: 1000;
 }
 
 aside.sidebar-left .draghandle {
   position: absolute;
   z-index: 100;
   width: 8px;
   top: 0;
   bottom: 0;
   right: 0;
   cursor: col-resize;
   float: right;
   background-color: red;
 }
 
 aside.sidebar-left .sidebar-logo img {
   max-width: 200px;
   padding-right: 5px;
   vertical-align: middle;
   border-style: none;
 }
 
 .wrapper {
   min-height: 100vh;
   width: 100%;
   height: 100%;
   table-layout: fixed;
   overflow: hidden;
   padding-top: 0;
 }

 #mainArea {
   background-color: blue;
 }
 
 .wrapper #mainArea.content {
   margin-left: 25%;
 }
 
 @media (min-width: 992px) {
   .wrapper #mainArea.content {
     margin-left: 250px;
   }
 }
 
 .mt-wrapper {
   position: relative;
   z-index: 1;
 }

 .nav {
   position: relative;
   top: 0;
   height: calc(100vh - 48px);
   padding-top: .5rem;
   overflow-x: hidden;
 }

 body {
   background: #14161D;
   color: #939089;
 }
 
 @media (max-width: 768px) {
   aside.sidebar-left {
     display: none;
   }
 }

JavaScript

var element = document.getElementById('resizable');
  if (element) {
    var resizer = document.createElement('div');
    resizer.className = 'draghandle';
    resizer.style.width = '6px';
    resizer.style.height = '100vh';
    element.appendChild(resizer);
    resizer.addEventListener('mousedown', initResize, false);
  }

  function initResize(e) {
    window.addEventListener('mousemove', Resize, false);
    window.addEventListener('mouseup', stopResize, false);
    document.getElementById("mainArea").classList.add('marginLeft')
  }

  function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    document.getElementById("mainArea").style.marginLeft = (e.clientX - element.offsetLeft) + 'px';
  }

  function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
  }