CSS grid adaptive cells

I'm trying to make sure the columns are the same width and can expand/contract freely as numbers are entered or deleted. I was able to achieve the desired behavior, but how can I prevent the right column from expanding infinitely and thus overlapping the left one?

<div class="tool-element__for movement-points__for">Движение для пехоты</div> <div class="movement-points__value"> <div class="tool-element__value">Всего очков движения</div> <div class="tool-element__value" contenteditable="true">1000</div> </div> .movement-points { display: grid; grid-template-columns: 1fr auto; grid-auto-rows: 18px; gap: 0 2px; align-items: stretch; align-content: start; } .movement-points__for { grid-column: 1 / -1; } .movement-points__value { display: contents; } .movement-points__value > div:first-child, .movement-points__value > div:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: stretch; } .movement-points__value > div:last-child { justify-content: flex-end; text-align: right; cursor: text; }