I'm implementing a native DnD in html5 for a bootstrap 3 grid and i'm trying to generate indicators while dragging in between of two elements to tell the user he can drop the item at that spot. 

Right now i'm adding `border-left` and `border-right` whenever the drag is hovering on the left or right side of the element. That basically works fine but when dragging over the borders to the next element the border jumps as the div size changes.

I've tried it with 

* `outline` -> cannot create outline for only one side
* `box-shadow` -> cannot use styles like `dashed`

I made a simple fiddle that demonstrates the effect: <https://jsfiddle.net/tmaqxh87/7/> (hover should simulate the DnD; the js is just for demonstration purpose)

Edit: my goal is to have one consistent line to appear between two boxes without any container changing the size. I would like to do that without generating any additional html elements.

Any help is appreciated, thanks