Column divider hacks

by lasha

HTML

<div class="container">
  <div class="content-wrapper">
    <div class="content-col col-divider">
      <div class="content-col-inner">
        1 content goes here blah blah blah
      </div>
    </div>
    <div class="content-col col-divider">
      <div class="content-col-inner">
        2 1 content goes here blah blah blah 1 content goes here blah blah blah
      </div>
    </div>
    <div class="content-col col-divider">
      <div class="content-col-inner">
        3 1 content goes here blah blah blah 1 content goes here blah blah blah 1 content goes here blah blah blah 3 1 content goes here blah blah blah 1 content goes here blah blah blah 1 content goes here blah blah blah 1 content goes here blah blah blah 1 content goes here blah blah blah
      </div>
    </div>
    <div class="content-col col-divider">
      <div class="content-col-inner">
        4 1 content goes here blah blah blah
      </div>
    </div>
  </div>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.container {
  border: 1px solid #999;
  padding: 0;
}
.content-wrapper {
  /* border: 1px solid #bbb; */
  overflow: hidden;
  position: relative;
}
.content-col {
  //position: relative; // this is important
  font-size: 12px;
  float: left;
  width: 25%;
  /* padding: 5px 10px; */
}
.content-col-inner {
  margin: 20px auto;
  width: calc(100% - 40px);
}
.col-divider:first-child:before {
  width: 0;
}
.col-divider:before {
  content: "";
  position: absolute;
  /* margin-left: -10px; */
  /* margin-left: -2%; */
  /* margin-left: -5vh; */
  top: 20px;
  height: calc(100% - 40px);
  width: 1px;
  background-color: #ccc;
}