I want to center an element horizontally in the visible area of a scrollable grid. So the text in the last row here should be centered horizontally inside the blue line.

This is what I want:

When scrolling, it should stay centered and visible:

This is what I've got so far:

JSFiddle: https://jsfiddle.net/6v0ybnd2/24/

<div class="wrapper">
<div class="otherContent"></div>
  <div class="grid" >
  <div class="row">
   Row - this is a long text in row 1
  </div>
  <div class="row">
   Row - this is a long text in row 2
  </div>
  <div class="row">
   Row - this is a long text in row 3
  </div>
  <div class="row-element" id="element">
   this row should always be centered in the visible area
  </div>
</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: auto auto;
}

.otherContent {
  width: 200px;
  background: orange;
}

.grid {
  display: grid;
  gap: 10px;
  margin: 10px;
}

.row {
  height: 20px;
  width: 1400px;
  background: lightBlue;
}

.row-element {
  height: 20px;
  width: 100vw; /* This width should be set to the visible  */
  position: sticky;
  text-align: center;
  left: 0;
  background: lightBlue;
}

const el = document.getElementById("element");
console.log(el.clientWidth);
el.style.maxWidth = el.clientWidth;

It works somewhat using width: 100vw, but only when the grid spans the full width. As far as I understand clientWidth gives the visible width of an element, however setting the width to that doesn't really work (presumably because it changes clientWidth again?

Any ideas how to solve this? Ideally only in css, but I'm assuming that's not possible. I'd also prefer not setting the position via javaScript, since that results in visible lag, so I think setting the width and using sticky is the best approach.