HTML Vertical Line with Buttons in The Middle - html

Question

I am trying to set a vertical line with buttons in the middle with bootstrap.
Using Bootstrap simple vertical line:
<div class="row">
<div class="col-md-6" style="padding-right:20px; border-right: 1px solid #ccc; " >
Area 1
</div>
<div>
Area 2
</div>
</div>
Above only shows a vertical line, but I wanted to be able to add these right in the middle of that vertical line.
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
I couldn't really figure out how to position it using CSS. Is there a good way to go about this?
Any suggestions?
Edit:
I added -
<div class="round" style="position: absolute; top: 40%; right: -13px;">
<span class="glyphicon glyphicon-chevron-right" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
<div class="round" style="position: absolute; top: 55%; right: -14px;">
<span class="glyphicon glyphicon-chevron-left" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
It works, but the vertical line is in between the buttons.. Any suggestions on updating this?

Answer 1

Try this something like this
<div class="row">
<div class="col-md-6">
<div style="padding-right:20px; border-right: 1px solid #ccc; " >Area 1</div>
</div>
<div>
Area 2
</div>

Answer 2

You could use the after selector in css: http://www.w3schools.com/cssref/sel_after.asp
Using it you could do something like:
<div class="row">
<div class="col-md-6 myStyle" style="" >
Area 1
</div>
<div>
Area 2
</div>
</div>
.myStyle {
padding-right:20px; border-right: 1px solid #ccc; }
.myStyle::after{
font-family: 'Glyphicons Halflings';
content: "whatever the icon you want is";
}
You can then use CSS to position the icons however you want.
If you'd like to use more than one Icon you could use the :before selector on the button on the right, and the after on the button on the left.