创建响应式CSS记分板，数值紧靠在条形图的左侧

<div id="scoreboard-container">
  <div class="score-bar"></div>
  <span class="score-value">0</span>
</div>

#scoreboard-container {
  display: flex;
  align-items: center;
  width: 300px; /* 设置容器的宽度 */
}

.score-bar {
  height: 20px; /* 设置条形图的高度 */
  background-color: #f0f0f0; /* 设置条形图的背景颜色 */
  flex-grow: 1; /* 让条形图占据剩余的空间 */
}

.score-value {
  margin-right: 10px; /* 设置数值与条形图之间的间距 */
}

var scoreValueElement = document.querySelector('.score-value');
var score = 0;

setInterval(function() {
  score++;
  scoreValueElement.textContent = score;
}, 1000);