<div class="parent">
  <div class="line"></div>
  <p>Parent (window) width: <span class="window"></span></p>
  <div class="line"></div>
</div>

<h1><code>CSS clamp() function<a class="support" href="https://caniuse.com/#feat=mdn-css_types_clamp">?</a></code></h1>

<p><code class="value">width: clamp(<span class="max">350px</span>, <span class="ideal">50%</span>, <span class="min">500px</span>);</code></p>

<div class="element">
  <p>Element actual width: <span class="actual"></span></p>
</div>

body {
  display: grid;
  place-content: center;
  text-align: center;
  font-family: system-ui, serif;
  font-size: 24px;
}

.value {
  background: lavenderblush;
  border-radius: 20px;
  padding: 0.3em 0.75em;
}

.window,
.actual {
  font-family: monospace;
  padding: 0.15em 0.35em;
}

.element {
  background-color: papayawhip;
  height: 200px;
  width: clamp(350px, 50%, 500px);
  place-content: center;
  justify-self: center;
  border: 1px solid gold;
  display: grid;
}

.actual {
  background: gold;
}

.window {
  background: lavenderblush;
  border-bottom: 3px dashed goldenrod;
}

.highlight {
  background-color: gold;
  border-bottom: 3px dashed goldenrod;
}

h1 {
  font-weight: 300;
  margin: 0 0 1rem;
}

.support {
  color: initial;
  background: papayawhip;
  border: 1px solid gold;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2rem;
  display: inline-grid;
  place-content: center;
  border-radius: 50%;
  vertical-align: text-top;
  text-decoration: none;
  margin-left: 0.25rem;
}

.parent {
  font-size: 16px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: lightgray;
}

.parent p {
  background: #f9f9f9;
  border: 1px solid lightgray;
  padding: 1rem;
}

const updateValues = () => {
  let pageWidth = window.innerWidth;
  let elemWidth = document.querySelector('.element').clientWidth;

  document.querySelector('.window').innerText = pageWidth + 'px';
  document.querySelector('.actual').innerText = elemWidth +'px';
  
  checkWidth(elemWidth);
}

const checkWidth = (elemWidth) => {
  const maxVal = parseInt(document.querySelector('.max').innerText, 10);
  const minVal = parseInt(document.querySelector('.min').innerText, 10);
  
  if (elemWidth === maxVal) {
    document.querySelector('.min').classList.remove('highlight');
    document.querySelector('.ideal').classList.remove('highlight');
    document.querySelector('.max').classList.add('highlight');
  } else if (elemWidth === minVal) {
    document.querySelector('.max').classList.remove('highlight');
    document.querySelector('.ideal').classList.remove('highlight');
    document.querySelector('.min').classList.add('highlight');
  } else {
    document.querySelector('.max').classList.remove('highlight');
    document.querySelector('.min').classList.remove('highlight');
    document.querySelector('.ideal').classList.add('highlight');
  }
}

updateValues();
window.onresize = updateValues;