Pure CSS for the border between two text areas -

i got design between 2 menu options there 2px border. please see image:

the tricky thing border shorter height of menu texts. the menu texts have in 2 lines, exact way shown. have more items different width of text. have pure css solution it, cannot figure out right way. tried different ways , got closest:

    <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">first<br/>item</div>     <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">second<br/>item</div> 

see picture above work:

the problem border not in middle vertically. how can make border stay in middle vertically?

or other css way achieve shown in design?

example :before pseudo element: https://jsfiddle.net/qfadxsyd/7/

.box:before {   position:absolute;   content:'';   height:80%;   right:-1px;   width:2px;   top:0;   bottom:0;   margin:auto;   background:red;  } 

and funny games in order hide last border. luck!

note: have removed whitespace between divs remove ghost margins between inline-block; elements:

<div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div>