好吧，在回答你的问题与准备复制粘贴代码，我会解释你做错了什么，所以在未来它不会发生。
基本上，你有两个密切相关的元素：div 'underline'和div 'dotDisplay'。
如果它们是强相关的，你会自动地认为它们可能需要在一个容器中：

<div class="container">
   <div class="underline"></div>
   <div class="dotDisplay dotDisplay-show">--</div>
</div>

好吧，但这并不能解决问题。为了解决问题，我们还需要改变CSS，因为计数器的定位代码及其下划线将需要放置在容器样式上：

.container{
      position:absolute;
      width: fit-content;   /*Necessary to adjust the container width to 
                            its content size*/
                            
      left:255px;           /*Positioning code now placed here*/
      top:80px;             /*Positioning code now placed here*/
      text-align: center;   /*This line is the key to solve the problem*/
    }

    .dotDisplay {
      color:#32608D;
      font-size: 20px;
      font-weight: bold;
      width: 100%;          /*The size of the display will be always
                            equal to the size of the container 
                            (100% is relative to its parent size)*/
    }

    .underline{
      width:35px;           /*The size here will determine the container`s size.
                            this means that the display size will be always equals to
                            its underline element, making a consistent visual */
                            
      border-bottom:2px solid #000;
    }

最后一件我们需要改变的事情是HTML中元素的顺序。在你的例子中，下划线元素在显示元素的上面一行，但是在屏幕中，下划线需要在下面。显然你可以用CSS来改变这一点，但是让我们简单地做一些事情：

<div class="container">
   <div class="dotDisplay dotDisplay-show">--</div>
   <div class="underline"></div>
</div>

现在你的代码是正确的。我想改变的其他事情是容器的位置，因为现在你使用的是绝对值，如果你正在考虑（你应该）响应式网站，这是一个不好的做法。
=）

您可以直接在显示数字的元素上添加边框，并使用一定量的填充。

const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay-show");
inputRange.addEventListener("input", (e) => {
  const V = inputRange.value;
  dotDisplay.innerHTML = V;
});

.dotDisplay {
  color: #32608D;
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 2px solid #000;
  padding-left: 10px;
  padding-right: 10px;
}

.dotDisplay-show {
  left: 255px;
  top: 80px;
}

<input type="range" min="0" max="200" step="1" value="0" id="inputRange">
<div class="dotDisplay dotDisplay-show">--</div>

下面的解决方案将margin-left和margin-right设置为auto，以将35px <div>和text-align: center置于其中的数字中心。

const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay");
inputRange.addEventListener("input", (e) => {
  const V = inputRange.value;
  console.log(V);
  dotDisplay.innerHTML = V;
});

.dotDisplay {
  text-align: center;
  margin-left: auto; margin-right: auto;
  width: 35px;
  font-size: 20px;
  font-weight: bold;
  color: #32608D;
  border-bottom: 2px solid #000;
}

<input type="range" min="0" max="200" step="1" value="0" id="inputRange">
<div class="dotDisplay">--</div>