<div class="block">
  <div class="block__title">Заголовок</div>
  <p class="block__description">
    <span class="block__description-line">Lorem ipsum dolor</span>
    <span class="block__description-line">sit amet.</span>
  </p>
</div>
body {
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.block {
  width: fit-content;

  &__title {
    margin: 0;
    padding: 16px;
    border: 2px solid #333333;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 1;
  }
  
  &__description {
    width: max-content;
    margin: 0;
    padding: 16px 0;
    line-height: 1;
    font-size: calc(1rem * var(--scale, 1));
  
    &-line {
      display: block;
    }
  }
}

.hidden {
  visibility: hidden;
}
View Compiled
const poster = (selectors, useObserver = false) => new Promise(resolve => {
  const updateScale = element => {
    element.style.setProperty('--scale', 1);

    const { width: parentWidth } = element.parentNode.getBoundingClientRect();
    const { width: elementWidth } = element.getBoundingClientRect();
    const scale = parentWidth / elementWidth;
    
    element.style.setProperty('--scale', scale);
  };
  
  const updateElements = () => {
    const parents = document.querySelectorAll(selectors.parent);
    for (const parent of parents) {
      parent.classList.add('hidden');

      const elements = parent.querySelectorAll(selectors.element);
      for (const element of elements) {
        updateScale(element);
      }
        
      parent.classList.remove('hidden');
    }
  };
  
  if (useObserver) {
    const observer = new MutationObserver(mutations => {
      for (const mutation of mutations) {
        updateScale(mutation.target);
      }
    });
    
    const parents = document.querySelectorAll(selectors.parent);
    
    for (const parent of parents) {
      const elements = parent.querySelectorAll(selectors.element);
      
      for (const element of elements) {
        observer.observe(element, {
          childList: true
        });
      }
    }
  }
  
  window.addEventListener('resize', updateElements);

  updateElements();
  resolve();  
});

poster({
  parent: '.block',
  element: '.block__description'
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.