Simplified Code

index.html

<div class="parent">
    <div class="line"></div>
    <p>Viewport Width: <span class="viewport"></span></p>
    <div class="line"></div>
  </div>
  
  <div class="rectangle">
    <p>Font Size: <span class="box"></span></p>
  </div>

script.js

const updateValues = () => {
    let pageWidth = window.innerWidth;
   let rectFont = document.querySelector('.rectangle');
  let styles = getComputedStyle(rectFont);
  let fontSize = styles.getPropertyValue('font-size');

    document.querySelector('.viewport').innerText = pageWidth + 'px';
  document.querySelector('.box').innerText = fontSize;
}

updateValues();
window.onresize = updateValues;

style.css

body {
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 20px;
    background-color: rgb(184, 206, 226);
    display: grid;
    place-content: center;
    text-align: center;
  }
  
  .rectangle {
    background-color: rgb(171, 208, 222);
    height: 180px;
    display: grid;
    place-content: center;
    justify-self: center;
    border: 2px solid rgb(85, 85, 233);
  }
  
.rectangle {
  width: min(100%, 600px);
}

.rectangle {
  font-size: 3rem;
}
@media (max-width: 1300px) {
  .rectangle {
    font-size: calc(-2rem + 5vw);
  }
}
@media (max-width: 900px) {
  .rectangle {
    font-size: 2rem;
  }
} 
  .viewport {
    background: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
    font-family: "Gill Sans Extrabold", sans-serif;
    padding: 0.1em 0.25em;
  }
  
  .highlight {
    background-color: rgb(222, 121, 87);
    border-bottom: 3px dashed blue;
  }
  
  .parent {
    font-size: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  
  .line {
    height: 1px;
    width: 100%;
    background-color: blue;
  }
  
  .parent p {
    background: white;
    border: 2px solid blue;
    padding: 1rem;
  }