Create skew div side by side - html

Question

How do i create like the image using two div?
I have search many used skew and I tried but didn't get exactly like the image.
only skew the div. not the content inside.
Here is what I have tried:
.container{
width: 100%;
}
.left{
float: left;
background: red;
height: 50px;
width: 50%;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
.right{
float: left;
background-color: #666;
height: 50px;
width: 50%;
}
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>

Answer 1

How is this. I used a gradient background and CSS grid to create two divs inside that are not skewed. A couple of caveats:
You will need to use padding on both sides to keep your text from running over the top of your color change.
You may need to use webkit for browser support of the linear gradient, depending on which older browser you intend to support.
.container {
background: linear-gradient(45deg,#FF0000 50%,#666666 50%);
display: grid;
grid-template-columns: auto auto;
width: 100%;
}
.side {
background-color: transparent;
color: #FFFFFF;
height: 50px;
}
<div class="container">
<div class="side">
test
</div>
<div class="side">
test
</div>
</div>