I am trying to archive this in my html:

[![enter image description here](https://i.stack.imgur.com/2LEQO.png)](https://i.stack.imgur.com/2LEQO.png)

jsfiddle: <https://jsfiddle.net/cr9vkc7f/4/>

I tried as you see insert the border in the left of my code

```
 border-left: 1px solid #444;

```

what I have right now is that but I want move the numbers to left side to be equal my first pic:
[![enter image description here](https://i.stack.imgur.com/pvX3O.png)](https://i.stack.imgur.com/pvX3O.png)

someone can help me with that, I really sure I am very close to archive it.