Создание наклонного элемента div той же высоты, что и его родители

Question

Это изображение баннера с двумя столбцами.

Floated-div наклонен в одну сторону (как рисунок бритвы), см. рисунок ниже, и текст должен следовать выравниванию по левому краю с наклонной линией.

Я использую shape-outside, чтобы текст выравнивался по наклону. Но плавающий элемент div не занимает всю высоту, поэтому текст продолжается под ним.

Это 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>

Я хотел бы решить эту проблему с помощью CSS.

Я попробовал это:

      .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;
}

Это приводит к этому (где текст заключает в себе плавающий элемент div).

Я хотел бы добиться этого (где он остается в двух столбцах и между ними есть наклонная линия)