Create a bouncing marquee only if child is wider than parent

I am making a site that has multiple data points in a list, and when one has too much information, I want that line to be white-space: nowrap in a parent that is overflow:hidden, but for it to slide back and forth revealing all of its text over time. I am looking for a pure css solution.

Getting the marquees to bounce is relatively simple. A class is toggled on the body at interval which the children react to. But I only want them to bounce if the child is wider than the parent. I have been incapable of finding a pure css solution to this problem so far. Can anyone help me? I assume it will involve container queries in some way, but whenever I start going down that path, transforms start breaking.

To sum up. This code has the bounce marquee working, how do I alter the css so that only the child that is wider than the parent bounces?

let marqueeActive = false;
const marqueeTiming = 3000;

setInterval(()=>{
  marqueeActive = !marqueeActive;
  document.querySelector(".cards").classList.toggle("marquee-active", marqueeActive);
}, marqueeTiming);

* {
  box-sizing: border-box;
}

.cards {
  display: flex;
  gap: 0.5em;
}
.card {
  background-color: pink;
  padding: 1em;
  border-radius: 0.5em;
  width: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.image img {
  max-width: 100%;
}
.description {
  overflow: hidden;
  width: 100%;
}


.description-item {
  line-height: 1.1em;
  height: 1.1em;
  white-space: nowrap;
  position: relative;
}
.marquee {
  position: absolute;
  translate: 0;
  left: 0;
  transition: all 1.5s;
  display: inline-block;
}
.marquee-active .marquee {
  translate: -100%;
  left: 100%;
}

<div class="cards">
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">
      <div class="description-item title"><span class="marquee">Lorem ipsum dolor</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">
      <div class="description-item title"><span class="marquee">Lorem</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">

      <div class="description-item title"><span class="marquee">This is the only text that should be bouncing.</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
</div>