Skew an image column/div in an inline row - html

Question

There are a few answers out there about how to skew the single side of a div both empty and with images:
CSS3 Transform Skew One Side
Skew one side only of an element
But using these answers, I cannot figure out the rest of my issue.
I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.
I am using Foundation 6 as the primary framework behind my site.
I have attached an image of how it should look completed
The closest I have got so far is this:
I have posted the code I have so far below.
Codepen
HTML:
<section class="lan_primary">
<div class="container-full">
<div class="row wide">
<div class="columns small-12 medium-6 lan_primary--select">
CONTENT LEFT
</div>
<div class="columns small-12 medium-6 lan_primary--img">
CONTENT
</div>
</div>
</div>
</section>
CSS:
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
}
&--img {
background-color: blue;
transform-origin: top left;
transform: skew(-20deg);
//margin-left: 80px;
}
}
UPDATE - from first answer
Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;.
See image below:

Answer 1

Use the triangle border trick with a pseudo. With viewport units it will scale with the height
To make the skew centered, I sized the right 25px (half of the skewed
area) wider than the left.
html, body {
margin: 0;
}
.wrapper {
display: flex;
}
.left, .right {
height: 100vh;
}
.left {
flex-basis: calc(50% - 25px);
position: relative;
background: lightgray;
display: flex;
align-items: center;
}
.left::after {
content: '';
position: absolute;
top: 0;
left: 100%;
height: 0;
width: 0;
border-top: 100vh solid lightgray;
border-right: 50px solid transparent;
}
.right {
flex-basis: calc(50% + 25px);
background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
background-size: cover;
}
<div class="wrapper">
<div class="left">
<h1>Some text</h1>
</div>
<div class="right"></div>
</div>

Answer 2

You can Make use of the pseudo elements to make the look skewed one side
CSS(SCSS)
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
position: relative;
overflow:visible;
&::after{
content:"";
position: absolute;
z-index:1;
top:0;
bottom:0;
height:100%;
width:20%;
background-color: cyan;
right:-40px;
transform:skew(-20deg);
}
}
&--img {
background-color: blue;
transform-origin: top left;
//margin-left: 80px;
}
}
link for reference
hope this helps