React + CSS spacing issue on long text

Question

I'm looking for any way to fix the issue below where the text is so long that it creates extra lines and covers the text underneath. The text in bold is the title and the text to the right of the "|" is the disease area. I'm attaching the code and the CSS below

I have a couple of questions:

Is there a way to auto shrink the font size of the text on either side of the "|" so that this doesn't happen? I know this feature exists in mobile apps and I'm not sure if it's possible with CSS.

Is there a way to increase the number of lines for that line of text to 2 without affecting the text underneath that?

I have access to the insigthsDiseaseArea CSS but I don't know if I can easily fix it here or if I need to somehow wrap the text into a different component and then apply new CSS there

React Component Code

      <div className={styles.content}>
        <div className={styles.title}>
          {data.totalEntities && (
            <div
              className={styles.groupCount}
              onClick={() => openGroupInsightsDetails(data)}
            >
              {`${data.totalEntities} ${entityType} `}
            </div>
          )}
          <ReactMarkdown
            renderers={{
              link: linkRender
            }}
            source={data.title_md || data.title || data.aggregatedTitle}
          />
          {entity && (
            <small className={styles.insigthsDiseaseArea}>
              {`  | ${data.diseaseArea.name} `}   // <- Here is the text that i'm trying to fix
            </small>
          )}
        </div>
        <div className={styles.sentence}>
          <ReactMarkdown
            renderers={{
              link: linkRender
            }}
            source={
              data.content_md || data.sentence || data.aggregatedDescription
            }
          />
        </div>
      </div>

CSS CODE

.title {
  color: color(text, dark);
  letter-spacing: 0.03em;
  line-height: 24px;
  font-size: 18px;
  display: inline-block;
  transition: $blur-transition;

  div {
    display: inline-block;
  }

  p {
    margin: 0;
    font-weight: 700;
  }
}

.insigthsDiseaseArea {
  position: absolute;
  margin-left: 5px;
}

Thanks for all of your help!