foundation css adding vertical line between columns

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

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

Answer 2

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>