Is it possible to add a vertical line that extends down the right side of the listed items on this website? I want to place the main content next to this vertical line.
.first a.nav-link {
background-color: #ebe0dd;
}
a.nav-link {
font-size: 23px;
font-family: 'Times New Roman', Times, serif;
color: black;
font-weight: lighter;
}
<div class="container d-flex flex-column flex-md-row">
<nav class="navbar navbar-expand-md navbar-light d-flex flex-md-column">
<button
class = "navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebar"
aria-controls="sidebar"
aria-expanded="false"
aria-label="Toggle Navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse sidebar" id = "sidebar">
<ul class = "navbar-nav w-750 my-3 d-flex flex-md-column text-center ">
<li class = "first"><a href="#" class = "nav-link" aria-current = "page">All</a></li>
<li><a href="#" class = "nav-link">To Pay</a></li>
<li><a href="#" class = "nav-link" >To Ship</a></li>
<li><a href="#" class = "nav-link" >To Receive</a></li>
<li><a href="#" class = "nav-link" >Completed</a></li>
<li><a href="#" class = "nav-link" >Cancelled</a></li>
</ul>
</div>
</nav>
</div>