JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textframe" contenteditable>
  <p>
    <span class="spacer flowbox"></span>
    <span>
      Clicking here is not a problem
    </span>
    <br>
    <br>
    <span>
      Lorem ipsum
    </span>
    <span class="spacer pagebreak"></span>
    <span>
      Clicking here (on empty space, not directly on text) will put the caret above the first .pagebreak element.
    </span>
    <br>
    <br>
    <span>
      Lorem ipsum
    </span>
    <span class="spacer pagebreak"></span>
    <br>
    <span>
      Clicking here is not a problem
    </span>
    <br>
    <br>
  </p>
</div>

CSS

body {
  background: white;
  font-family: Arial, sans-serif;
}

p {
  margin: 0;
  padding: 0;
}

.textframe {
  width: 350px;
  height: 600px;
  border: 1px solid black;
}

.spacer {
  background: yellow;
}

.pagebreak {
  display: block;
  min-height: 80px;
}

.flowbox {
  float: right;
  clear: right;
  width: 30px;
  height: 600px;
}