Vertical line on Bootstrap 5 - html

Question

May I ask as to how to create a vertical line that extends all the way down the right side of the listed items on this website? since I'll place the main content after the vertical line I'm trying to figure out
.first a.nav-link {
background-color: #ebe0dd;
}
a.nav-link {
font-size: 23px;
font-family: 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">All</li>
<li>To Pay</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>

Answer 1

Add the border-end class to the ul element:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container d-flex flex-column flex-md-row">
<nav class="navbar navbar-expand navbar-light flex-column" style="height: 100vh;">
<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 h-100 w-750 my-3 d-flex flex-column text-center border-end">
<li class = "first">All</li>
<li>To Pay</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>