Added border in css go over the last div - html

Question

The issue is that I have a div list of ott-col-right-inner but when I tried to add the table under id the border in that div goes through. here is it's css:
.point-count:before {
content: '';
position: absolute;
border-bottom: none;
left: 48px;
border-left: solid 4px #F3F3F3;
height: 100%;
top: 30px;
}
I only want the border to stop in the point-count div
Here is the JSfiddle link:
https://jsfiddle.net/q6pmaebj/
code in question:
<div class="ott-col-right-inner">
<div class="point-count"><h3>01</h3></div>
<div class="point-text"><p>Step 1</p></div>
</div>
<div class="ott-col-right-inner">
<div class="point-count"><h3>02</h3></div>
<div class="point-text"><p>Step 2</p></div>
</div>
<div class="ac">
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #99acc2;">
<tbody>
<tr>
<td style="border: 0.5pt solid #000000; width: 100%; padding: 4px;">
<p>One</p>
</td>
</tr>
<tr>
<td style="border: 0.5pt solid #000000; width: 100%; padding: 4px;">
<p>Two</p>
</td>
</tr>
</tbody>
</table>
</div>
I tried to do something with nth-last child where I take the border out in the last bit, but this seems to be not working:
.point-count:last-child:before { border-left: none; }
Note: I cannot change the div tags because this is in a for each loop

Answer 1

After looking through the jsfiddle link it looks like the solution is that the ott-col-right div tag wasn't closed and by adding that we were able to take the styling and only apply it to what is enclosed in the tag. I'm learning myself so let me know if this works for you!
Screenshot from jsfiddle with the closing tag

Answer 2

add this css
.point-count:before {
content: '';
position: absolute;
border-bottom: none;
left: 35px; //change here
border-left: solid 4px #F3F3F3;
height: 100%;
top: -30px; //change here
}
.ott-col-right-inner{
position: relative;
}
.ott-col-right-inner:first-child .point-count:before{
top: 10px;
}
fiddle here

Answer 3

it's not border, it's the child's before and you set its height to 100%, so that's why. you need to manage its height properly. here I set it only 200px
.ott-col-right {
flex: 0 0 50%;
max-width: 50%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
padding-right: 15px;
padding-left: 15px;
}
.point-count {
margin: 0px;
float: left;
width: 70px ;
height: 70px ;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #F3F3F3;
}
.point-count h3 {
z-index: 1;
color: #3E3E3E;
font-size: 23px;
font-weight: 600;
}
.point-text {
text-align: left;
float: left;
width: calc(100% - 100px);
height: 70px;
display: flex;
align-items: center;
margin: 0px auto;
margin-left: 20px;
}
.ott-col-right-inner {
width: 100%;
display: block;
float: left;
padding: 10px 0px;
}
.point-text p {
font-family: "Exo 2", sans-serif;
color: #828389;
font-size: 16px;
margin: 0px 5px;
}
.point-text p a {
color: #CE1126;
font-size: 15px;
font-weight: 700;
position: relative;
}
.point-count:nth-child(1):before {
content: '';
position: absolute;
border-bottom: none;
left: 48px;
border-left: solid 4px #F3F3F3;
height: 200px;
top: 30px;
}
.ott-col-right-inner:last-child {
padding-bottom: 0px;
}
.vidyard-player-container
{
border-radius: 20px;
}
<div class="ott-col-right">
<div class="ott-col-right-inner">
<div class="point-count"><h3>01</h3></div>
<div class="point-text"><p>Step 1</p></div>
</div>
<div class="ott-col-right-inner">
<div class="point-count"><h3>02</h3></div>
<div class="point-text"><p>Step 2</p></div>
</div>
<div class="ott-col-right-inner">
<div class="point-count"><h3>03</h3></div>
<div class="point-text"><p>Step 3</p></div>
</div>
<div class="ac">
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #99acc2;">
<tbody>
<tr>
<td style="border: 0.5pt solid #000000; width: 100%; padding: 4px;">
<p>One</p>
</td>
</tr>
<tr>
<td style="border: 0.5pt solid #000000; width: 100%; padding: 4px;">
<p>Two</p>
</td>
</tr>
</tbody>
</table>
</div>