How can I make a vertical line between divs? - html

Question

I'm trying to make a vertical line between my div.
I want to my line to fit the whole height of the div, I couldn't get to do that.
I've tried border-right, and border-left of the next div.
Here is my my results
border-right
border-left of the next div
Can someone please show me the best way to accomplish this ?
Thanks in advance.
CODE
<style type="text/css">
.panel {
border-radius: 0px !important;
background-color: #4D8FCB;
color: white;
margin-left: 25px;
margin-right: 25px;
}
.panel-heading {
height: 114px;
}
.panel-body {
font-size: 10px;
background-color: white;
}
.sa-h1 {
color: white;
font-size: 39px;
font-weight: bold;
font-style: normal;
font-family: "adelle-sans", sans-serif;
}
.sa-h2{
font-size: 28px;
}
.sa-h3{
font-size: 16px;
}
.sa-h4{
font-size: 14px;
}
.sa-h5{
font-size: 12px;
}
.sa-h6{
font-size: 10px;
}
.sa-right-items{
float: left;
/*line-height: 114px;*/
}
.sa-answer, .sa-score, .sa-review, .sa-report {
vertical-align: middle;
display: inline-block;
padding: 5px 22px;
}
</style>
<br><br>
<div class="row student-accordion ">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="row panel-heading">
<div class="panel-title">
<div class="col-xs-1 sa-section" >
<p><span class="sa-h5">SECTION</span>
<br>
<span id="sa-section-num" class="sa-h1">2.2</span>
<br><span class="sa-h5">EXERCISE</span>
</p>
</div>
<!-- Title -->
<div class="col-xs-6 col-lg-6" style="border-left: 2px solid white;" >
<span class="sa-h3">Section Exercise 2.2</span><br>
<span class="sa-h5">ALGEBRA 1</span> <br>
<span class="sa-h4">02/09/2015</span>
</div>
<!-- Answers -->
<div class="sa-right-items text-center">
<span class="sa-answer">
<span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
</span>
<!-- Score -->
<span class="sa-score">
<span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
</span>
<!-- Review -->
<span class="sa-review">
<img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
<span> <span class="sa-h6">REVIEW</span> </span>
</span>
<!-- Report -->
<span class="sa-report">
<span data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" class="pull-right">
<img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
<span> <span class="sa-h6">VIEW REPORT</span> </span>
</span>
</span>
</div>
</div>
</div>
<div id="student-accordion-collapse" class="panel-collapse collapse">
<div class="panel-body">
Contents
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle

Answer 1

Remove the border style from .col-xs-6 col-lg-6, then:
.col-xs-1 sa-section {
border-right: 2px solid #fff;
margin-top: -11px;
padding-top: 11px;
}
Basically the border will show up within padding, so you just need to move the container up a bit (using a negative margin-top) and add some padding so the text shows up in the same place.
You will probably want to add an ID to the container and target it in CSS that way, instead of defining the styles of the class.
JSFiddle

Answer 2

Please check the fiddle - http://jsfiddle.net/onms9kcu/3/
border inline style removed, and added the below style.
.sa-section:after{
border-right: 2px solid white;
content: "";
display: block;
width: 1px;
position: absolute;
bottom: -10px;
top: -10px;
right: 0;
}