manual TOC on left side bar css help.

I want TOC on left side bar so i read some article and made it like this.

There are 3 classes (table-of-contents, toc-heading, toc-contents)
Because i made Heading and List into group.
So group is table-of-contents
Heading is toc-heading
List is toc-contents

But,
the style i want is like a table (see * on image)
how can i make it?

Here is my style
https://imgur.com/ATBUM71
Here is what i want
https://imgur.com/2rhdt6l

The css i used is (honestly i dont like this style)

.table-of-contents {
padding: 20px;
}

.toc-heading {
font-weight: 900;
font-size: 10px;
}

ul.toc-contents {
margin-top: 0em!important;
margin-left: 0em!important;
}

.toc-contents li {
list-style-type: none;
position: relative;
}

.toc-contents a {
font-size: 15px;
color: #000000;
text-decoration: none!important;
}

.toc-contents a:hover {
color: #585858;
border-bottom: 2px solid #585858;
}

.toc-contents li:before {
content: "➜➜";
margin-right: 1em;
color: #585858;
left: -30px;
position: absolute;
}