Position element midway between adjacent element and end of parent element - css

Question

I've got the following markup. It's being delivered dynamically, I'm limited in what changes can be made to it.
Markup:
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
<span class="icon">|</span>
</div>
</div>
CSS (not quite doing as required/described)
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.icon {
width:3px;
margin-left:auto;
margin-right:auto;
}
I need to position the <span class="icon">|</span>'s midway between the end of the <span class="stageText">'s and the right boundary of the parent element. Here's a jsfiddle demonstrating the situation: http://jsfiddle.net/jralston/vc6pzawk/
Any help or pointers very much appreciated.
Thank You
John

Answer 1

I create this solution using pseudo-element :after:
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.stage:after {
content: "|";
position: relative;
left: 25%;
}
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
</div>
</div>

Answer 2

Read the comments for changes. Advantage of this technique is that you do not need to use javascript or change the html, just css.
JSFiddle
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:inline-block;/*instead of table-cell*/
text-align: center;/*centers text*/
float: left;/*float */
width:33.33333%;
}
.icon {
float: right;/*put icons left or right from text*/
width:3px;
}

Answer 3

I'm not sure if there's an easy to do this in CSS but you can do it relatively easy through JS & jQuery:
$('.icon').each(function () {
var $el = $(this),
containerWidth = $el.parent().width(),
contentWidth = $el.prev().width();
$el.css('left', (contentWidth) + ((containerWidth - contentWidth) / 2));
});
http://jsfiddle.net/vc6pzawk/3/