I'm trying to get the numbers in the middle of the box
I tried a lot and a lot but couldn't do it
Please Help
I'll attach a picture of what I'm trying to come up with, a picture of what I made and the code I used

[my code](https://i.stack.imgur.com/NFqap.png)

[what i made](https://i.stack.imgur.com/aBZBl.png)

[What am I looking at](https://i.stack.imgur.com/W8Siv.png)

```css
p {
    background-color: #eee;
    padding: 15px;
    margin: 10px;
    width: 600px;
    float: left;
    position: relative;
    left: 50px;
    counter-increment: num;

}

p::after {
    content: "";
    width: 5px;
    height: 100%;
    background-color: tomato;
    position: absolute;
    right: -5px;
    top: 0%;
}
p::before {
content: counter(num);
position: absolute;
background-color: tomato;
width: 50px;
height: 50px;
left: -40px;
top: 0px;
margin-top: ;
text-align: center;
font-weight: bold;
color: white;
}
```

```html
    <p class="a">This Is Very Very Long Product Title</p>
    <p class="b">This Is Very Very Long Product Title</p>
    <p class="c">This Is Very Very Long Product Title</p>
    <p class="d">This Is Very Very Long Product Title</p>
    <p class="e">This Is Very Very Long Product Title</p>
    <p class="f">This Is Very Very Long Product Title</p>
```