Vertical divider Sass mixin

Full height divider that will fill vertically previous relative container.

HTML

<div class="area-to-be-divided">
    
    <p>Some information</p>
    
    <div class="split">
    </div>

    <p>Some more information</p>
    
    <div class="split">
    </div>
</div>

<div class="no-divider">
    
    <p>Some information</p>
    
</div>

SCSS

@mixin vertical-divider(
    $primaryColor: #eee, 
    $secondaryColor: #aaa,
    $dividerWidth: 2px) 
{
    &:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        border-left: $dividerWidth solid $primaryColor;
    }
}

p {
    float: left;
    width: 30%;
    margin-left: 1em;
}

.area-to-be-divided, .no-divider {
    @extend .clearfix;
    position: relative;
    margin-bottom: 1em;
    border: 1px solid gray;    
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}
    
.split {
    @include vertical-divider($primaryColor: #eee, $secondaryColor: #aaa);
}