<div class="container">
  <div class="text">
  <p class="title">
    <span class="wrapper">
      Some text Some text Some text Some text Some text Some text
    </span>
    <span class="hint">
      Some small <br> text
    </span>
  </p>
  </div>
  <p class="bottom-text">
    Some bottom text 
  </v>
</div>
.title {
  font-weight: 700;
  font-size: 40px;
  margin: 0;
}

.hint {
  font-size: 24px;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5em;
  margin-left: 0.4em;
}

* {
  font-family: sans-serif;
}

.bottom-text {
  font-size: 18px;
  margin: 0;
}
.container {
  max-width: 800px;
  margin: 0 auto;
}
const a = document.querySelector('.title .wrapper');
const b = document.querySelector('.title .hint');

const clamp = (min, max, value) => Math.max(min, Math.min(max, value));

const calculateIntersection = (a, b) => {
    const aRect = a.getBoundingClientRect();
    const bRect = b.getBoundingClientRect();
    const top = clamp(aRect.top, aRect.bottom, bRect.top);
    const right = clamp(aRect.left, aRect.right, bRect.right);
    const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
    const left = clamp(aRect.left, aRect.right, bRect.left);
    const width = right - left;
    const height = bottom - top;

    const totalArea = bRect.width * bRect.height;
    const intersectionArea = width * height;
    const intersectionRatio = intersectionArea / totalArea;

    return intersectionRatio;
};

const update = () => {
  const intersectionRatio = calculateIntersection(a, b);
  const threshold = 0.5;
  
  if (intersectionRatio >= threshold) {
    b.style.setProperty('outline', '2px solid tomato');
  } else {
    b.style.setProperty('outline', '2px dashed tomato');
  }
  
  console.log(intersectionRatio);
};

window.addEventListener('DOMContentLoaded', update);

window.addEventListener('resize', update);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.