Html 如何将背景与之前的内容正确对齐

我有这个html struct :

<div class="single-apartment-typology-text">
  <span class="title-apartment primary-title text-animated">
    <div class="title">Testing</div>
    <div class="uptitle">
      <span> last 3 opportunity</span>
    </div>
  </span>
</div>

我已经使用:before属性添加了背景title-apartment.我的目标是让uptitle内的跨度与边框对齐，问题是当我更改分辨率时，内容不会粘在正确的边框上:

这是我的SCSS:

.title-apartment {
    position: relative;
    width: 400px;
    height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .title {
       position: absolute;
       z-index: 2;
       display: block;
       left: 0;
     }

    &:before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: $yellow;
       left: 65px;
    }

    .uptitle {
        position: relative;
        z-index: 1;
        margin-right: 10px;
        background-color: $blue;
        color: #fff;
        padding: 10px;
        transform: translateX(33.8%);

       span {
         display: block;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
        line-height: 23px;
      }
  }
}

我try 使用translateX属性将深蓝色背景附加到右侧黄色背景的情况下保持跨度，但到目前为止没有成功.

有什么办法解决这个问题吗？