How to make a responsive menu, which on width adjustment turns into a slide out menu

I split my website into two parts.
70% of the left part is main content and on the other 30% is a menu.

Full Code:

HTML:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>asdas</title>
</head>

<body>
  <div class="tag-menu-header">
    <h1>Your Tags</h1>
  </div>
  <div class="tag-menu">
    <table style="width: 100%; height: auto">
      <tr>
        <td><a href="#"><span class="tag" style="border-color: red; color: red;"><span class="tag-dot" style="border-color: red; color: red;"></span>Math</span></a></td>
        <td>
          <p id="post-count">177 Posts</p>
        </td>
      </tr>
      <tr>
        <td><a href="#"><span class="tag" style="border-color: blue; color: blue;"><span class="tag-dot" style="border-color: blue; color: blue;"></span>English</span></a></td>
        <td>
          <p id="post-count">25 Posts</p>
        </td>
      </tr>
      <tr>
        <td><a href="#"><span class="tag" style="border-color: purple; color: purple;"><span class="tag-dot" style="border-color: purple; color: purple;"></span>German</span></a></td>
        <td>
          <p id="post-count">46 Posts</p>
        </td>
      </tr>
      <tr>
        <td><a href="#"><span class="tag" style="border-color: orange; color: orange;"><span class="tag-dot" style="border-color: orange; color: orange;"></span>Notes</span></a></td>
        <td>
          <p id="post-count">9 Posts</p>
        </td>
      </tr>
    </table>
  </div>
  <div id="main-content">
    <h1>Main Content</h1>
  </div>
</body>

</html>

CSS:

#main-content {
  width: 70%;
  height: 1000px;
  background: green;
}

.tag-menu {
    z-index: 10;
    position: absolute;
    top: 150px;
    right: 0;
    width: 400px;
    height: 650px;
    margin-right: 20px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: auto;
}

.tag-menu-header {
    width: 400px;
    margin-right: 20px;
    margin-top: 20px;
    z-index: 10;
    position: absolute;
    right: 0;
}

.tag-menu-header h1 {
    text-align: center;
}

#post-count {
    color: #8d8888;
    float: right;
}

/* Tag Start */

.tag {
    border-radius: 10px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: 2px solid;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    padding: 2px 5px;
}

.tag-dot {
    height: 10px;
    width: 10px;
    background-color: transparent;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.tag:hover{
    border: 3px solid;
}

/* width */
.tag-menu::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
 .tag-menu::-webkit-scrollbar-track {
    background: black; 
  }
   
  /* Handle */
  .tag-menu::-webkit-scrollbar-thumb {
    background: rgb(25, 23, 23); 
  }
  
  /* Handle on hover */
  .tag-menu::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

Link for preview: https://codepen.io/ficko90/pen/xxJLxxr

Error: When the window resizes its width, the menu goes over the main content due to its position: absolute

As of my preference, I don’t want to have a slide-out-menu, when the page is in a full sized window, because I want to fill out the empty space. Instead, when the menu is about to come close to the main content, I want it to turn into a slide out button, that can showcase a menu and gray out everything behind it.

I haven’t found anything like my request, without the use of SCSS

For my project I use: Bootstrap, pure CSS and JavaScript.

I have no such knowledge to fulfill the task, so any help would be appreciated.
Thanks.