使倾斜的 div 与其父级的高度相同

问：

这是一个横幅图像，有 2 列。

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 括起来）。

我想实现这一点（它保留在两列中，并在它们之间有一条斜线）