CSS Code for Div Left-Border with Bullet Points for each Content

I have an html block in which I have to add blue color for the border-left of its div and add bullet points at the starting of each content as shown in the below image.

I tried with the below code, but my design doesn't match with the above image. The below image shows what I developed.

Below is my html code for this popup:

<div id="AuditModal" class="modal">
<div class="modal-content">
    <div>
        <h1 class="chart-heading-cls AuditTitle">Audit</h1>
        <a class="modal-close"><img class="Close closemodal" src="~/Close.svg"></a>
    </div>
    <div id="Audit">
        <div class="card-content">
        </div>
    </div>        
</div>
</div>

Inside which, I'm appending the content in a loop using jQuery as below:

markup = "<div><div class='UserTitle UserTitleBullet pl23'>" + ActionData[i].ACTION_TAKEN_BY + "</div><div style='float:right'><img src='../raised.svg' class='material-icons' alt='Alert'/></div></div>" +
         "<br /><div class='RDTitle pl23'><div style='width:160px;float:left''>" + Role + "</div><div style='width:160px;float:left''> " + Date + "</div></div>" +
         "<div class='CommentTitle pl23'>Comment</div>" +                        
         "<div class='CommentDescription pl23'>" + ActionData[i].DESCRIPTION + "</div>" +
         "<br /><br />";
 tableBody = $("#Audit");
 tableBody.append(markup);

Here is my CSS code:

.UserTitleBullet {
  background: #1A9AD4;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  text-align: center;
}
#Audit {
  border-left: 3px solid #1A9AD4;
  margin-top: 24px;
  margin-bottom: 24px;
  overflow-y: auto;
  height: 302px;
}

Can you help me to achieve what is in the original design?

This is a CSS question, not a jQuery or JavaScript one.

The challenge is that the blue progress bar at the left has display conditions that make a simple border-left insufficient: For the first item, there is no blue shown above the bullet; and for the last item, there is no blue below the bullet. Therefore, we need a way to change the color of the bar above and below the bullet.

My solution is to use a CSS linear-gradient background. Instead of using it to gently transition from one color to another, I am using it to abruptly change from one color to another.

Next, I put the bullet inside the bar and position it absolutely so that it is directly centered to where the color changes.

My approach uses modifier classes to have different styling of the bar for the first and last items in the list - .bar--first and .bar--last. It also uses flexbox to position the bar to the left of the item content and ensure that it extends to the full height of the content.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#Audit {
  height: 302px;
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: -5px;
  margin-right: -5px;
  overflow-y: auto;
  padding: 0 5px;
}

.action-item {
  display: flex;
}

.action-item-body {
  flex: 1 1 100%;
  padding: 0 20px;
}

.bar {
  background: #1a9ad4;
  position: relative;
  width: 4px;
}

.bar.bar--first {
  background: linear-gradient(to bottom, white 10px, #1a9ad4 10px, #1a9ad4);
}

.bar.bar--last {
  background: linear-gradient(to bottom, #1a9ad4 10px, white 10px, white);
}

.bullet {
  background: #1a9ad4;
  border-radius: 50%;
  position: absolute;
  height: 10px;
  left: -3px;
  top: 7px;
  width: 10px;
}

.bullet.bullet--active {
  box-shadow: 0 0 10px #1a9ad4;
}

<!-- language: lang-html -->

<div class="action-item">
  <div class="bar bar--first">
    <div class="bullet "></div>
  </div>
  <div class="action-item-body">
    <div>
      <div class="UserTitle pl23">John</div>
      <div style="float:right">
        <img src="../raised.svg" class="material-icons" alt="Alert">
      </div>
    </div>
    <br>
    <div class="RDTitle pl23">
      <div style="width:160px;float:left">Foo</div>
      <div style="width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
    </div>
    <div class="CommentTitle pl23">Comment</div>             
    <div class="CommentDescription pl23">Lorem ipsum dolor</div>
    <br><br>
  </div>
</div>

<div class="action-item">
  <div class="bar ">
    <div class="bullet "></div>
  </div>
  <div class="action-item-body">
    <div>
      <div class="UserTitle pl23">John</div>
      <div style="float:right">
        <img src="../raised.svg" class="material-icons" alt="Alert">
      </div>
    </div>
    <br>
    <div class="RDTitle pl23">
      <div style="width:160px;float:left">Foo</div>
      <div style="width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
    </div>
    <div class="CommentTitle pl23">Comment</div>             
    <div class="CommentDescription pl23">Lorem ipsum dolor</div>
    <br><br>
  </div>
</div>

<div class="action-item">
  <div class="bar bar--last">
    <div class="bullet bullet--active"></div>
  </div>
  <div class="action-item-body">
    <div>
      <div class="UserTitle pl23">John</div>
      <div style="float:right">
        <img src="../raised.svg" class="material-icons" alt="Alert">
      </div>
    </div>
    <br>
    <div class="RDTitle pl23">
      <div style="width:160px;float:left">Foo</div>
      <div style="width:160px;float:left">Sun Feb 19 2023 10:08:41 GMT-0500 (Eastern Standard Time)</div>
    </div>
    <div class="CommentTitle pl23">Comment</div>             
    <div class="CommentDescription pl23">Lorem ipsum dolor</div>
    <br><br>
  </div>
</div>

<!-- end snippet -->

I have also created a fiddle that uses a Handlebars templating build the HTML.