JSFiddle - React, Tailwind, and code Playground

by int32_t

HTML

See <kbd>fast/writing-mode/flipped-blocks-inline-map-local-to-container.html</kbd>
<div contenteditable=true style="display:flow-root">
<p>Legacy:</p>
<div class="v_rl">
    before
    <span>
        <div style="display: inline-block"><div>first</div><div>last</div></div>
    </span>
    after
</div>
<div class="v_lr">
    before
    <span>
        <div style="display: inline-block"><div>first</div><div>last</div></div>
    </span>
    after
</div>
</div>

<div style="display:flow-root">
<p>LayoutNG:</p>
<div class="v_rl">
    before
    <span>
        <div style="display: inline-block"><div>first</div><div>last</div></div>
    </span>
    after
</div>
<div class="v_lr">
    before
    <span>
        <div style="display: inline-block"><div>first</div><div>last</div></div>
    </span>
    after
</div>
</div>

CSS

.v_rl {
  width: 80px;
  background-color: lightyellow;
  writing-mode: vertical-rl;
  padding-right: 60px;
  font: 20px/1 sans-serif;
  border: 1px solid blue;
  text-orientation: sideways;
}

.v_lr {
  width: 100px;
  padding-left: 40px;
  background-color: lightyellow;
  writing-mode: vertical-lr;
  font: 20px/1 sans-serif;
  border: 1px solid blue;
  text-orientation: sideways;
}