JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

CSS

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none !important;/* << ADDED !important */
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  /*color: #f4f3f3;*//* << Uncomment or remove this line */
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

/* Added these extra styling */
.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}
/* End of added extra styling */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
   ...

JavaScript

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});