<header>
  <h1 class='logo'>Logo here</h1>
</header>

header {
  width: 100%;
  height: 120px;
  padding: 20px;
  background-color: #333;
  font-family: Arial, sans-serif;
  color: white;
}

header .logo {
  color: yellow;
}

a {
  text-decoration: none;
  color: yellow;
}

const headerContact = (phoneNumber) => `
  <div id='phoneNumberBox' class='contactInfo'> 
      Call me: <a href='tel:${phoneNumber}'>${phoneNumber}</a>
  </div>
`

const resizeHandler = function(event) {
    const header = document.querySelector('header')
    const contactInfo = header.querySelector('#phoneNumberBox')
    console.log('firing') // check your console
    
    if (window.innerWidth > 850) {
        if (contactInfo === null) {
            header.insertAdjacentHTML('beforeend', headerContact('+1 012-3456780'))
        }
        return // return out of the handler function
    }

    if (contactInfo !== null) contactInfo.remove()
}

window.addEventListener('resize', _.debounce(resizeHandler, 300))
resizeHandler()