video-title ellipsis bug

by Spencer Smith

HTML

<div id="root">
  <div id="styled-app">
    <div id="styled-page">
      <div id="videos-wrap">
        <div id="video-card">
          <div id="card-top">
            <div id="video-title">
              We Can't Ignore This Any Longer | Building Our Mountain Home
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

* { box-sizing: border-box; }
body {
  margin: 10px;
}
#root {
  display: flex;
  justify-content: center;
}
#styled-app {
  display: flex;
  justify-content: center;
  max-width: 600px;
  flex-grow: 1;
  margin: 60px 0;
}
#styled-page {
  flex-grow: 1;
  max-width: 600px;
}
#videos-wrap {
  position: relative;
  transition: opacity 0.15s;
  background-color: lightblue;
}
#video-card {
  background-color: rgb(0 0 0 / 2.5%);
  margin: 15px 0;
  border-radius: 3px;
}
#card-top {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  padding-bottom: 0;
  gap: 15px;
  overflow: hidden;
}
#video-title {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  font-weight: 500;
}