Nested grid alignment

Question

There is a grid with a dynamic number of elements that fills depending on the height of the parent. Nested elements are also grids to align content vertically. In my example, the red numbers should be under the red ones - the black ones under the black ones, as in the screenshot below. In the code below they are not aligned. How to do it? I know about subgrid, but I need a solution without it

Screenshot

  <h1 id="header"></h1>
  <div class='grid'>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner-offset">109123</span>
      </div>
      <span class="grid-item-inner-offset" style="color:red">1201</span>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Dorem</span>
        <span class="grid-item-inner-offset">1091</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Amet</span>
        <span class="grid-item-inner-offset">109123</span>
      </div>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum dorem</span>
        <span class="grid-item-inner-offset">19123</span>
      </div>
     <span class="grid-item-inner-offset" style="color:red">14</span>
    </div>
    <div class='grid-item'>
      <div class='grid-item-inner'>
        <span>Lorem ipsum</span>
        <span class="grid-item-inner-offset">19123</span>
      </div>
    </div>
  </div>

body {
  height: 60px;
  width: 100%;
}

.grid {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 5px 25px;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(auto-fit, 19px);
}

.grid-item {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-rows: max-content;
}

.grid-item-inner {
  display: flex;
  justify-content: space-between;
}

.grid-item-inner-offset {
  margin-left: 10px;
}