foundation css adding vertical line between columns - html

Question

I have this html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article style="border-left:1px solid #000;" class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
I want to add a vertical line between the columns that stretches all the way from the top of the card to the bottom.
adding the border:... style wont help as there is padding to the card class.
creating an element with the position:absolute doesn't help as this is a responsive page and everything needs to be dynamic

Answer 1

After searching around I haven't found any good pre made solutions so what I did was create a background image from the linear-gradient and set a background position made of percentage to make it dynamic as so:
.card{
background-color: #fff;
background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: linear-gradient(180deg, transparent, #ccc, transparent);
background-position: 65%;
background-repeat: repeat-y;
background-size: 1px 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card" style="background-color: #fff;background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);background-image: linear-gradient(180deg, transparent, #ccc, transparent);background-position: 65%;background-repeat: repeat-y;background-size: 1px 1px;">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>

Answer 2

updated answer with pseudo element:
.card-section {
position:relative;
}
.small-4:before {
content:'';
position:absolute;
top:0;
bottom:0;
border-right:solid;
margin-left:-0.75em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
Edit
You can also override fondation CSS to get rid of float at first and then and reset display:
display:flex (do not care if child are floating)
.row {
display:flex;
}
.row :last-child {/* last cells chosen for demo cause shorter in content */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:table + float:none; because float kills display :(
.row {
display:table;
width:100%;
}
.card .card-section .row > article.columns {
display:table-cell;
float:none;/* else display is killed */
}
.row :last-child {/* shortest chosen for demo, you could select first-child or .small-4 */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:grid .... well maybe in the futur and then flex will be fully efficient with less CSS to write . BTW, display:table is to include eventually oldish browser that do not accept the flex model