Making a slanted div same height as its parents

Question

This is a banner image, with 2 columns.

Floated-div is slanted to one side (like a razor design), see the picture further down, and the text are suppose to follow the left alignment with the slanted line.

I use shape-outside to make the text follow the slanted alignment. But the floated div do not take the entire height, making the text continue underneath it.

This is the HTML:

<div class="container">
  <div class="floated-div">
    <img src="#" class="shape-element" alt=""/>
  </div>
  <div class="txt">
    <p>
Nulla semper, est suscipit eleifend pharetra, leo ipsum vestibulum turpis, in tempus libero est quis felis. Nullam auctor id odio ac rhoncus. Aenean quis urna dapibus ligula vehicula ornare sed tempus purus. Aenean pharetra, ipsum sed ornare eleifend, purus risus aliquam diam, non ullamcorper mi purus quis lacus.
    </p>
  </div>
</div>

I would like to solve it with CSS.

I tried this:

.container {
  background-color:red;
  display:flow-root;
}

.shape-element {
  shape-outside: polygon(0% 0%, 62% 0%, 103% 160%, 0% 163%);
  shape-margin: 2.5rem;
  float: left;
  max-width: 50%;
  display: block;
}

It results in this (where the text encloses the floated div).

I would like to achieve this (where it remains in two columns and have a slanted line between them)