由于您将：before pseudo元素右移65px，.uptitle元素不知道它在哪里，因为它是兄弟元素而不是子元素。最简单的方法是设置一个css custom property来记录:before伪元素移动了多远，然后将.uptitle元素向右移动相同的量。如果我们使用right属性，那么我们的参考点将是右边框，但它必须是负值，然后向右移动该元素。所以calc在里面。
下面标记代码

body {
  background: #BCB5AF;
}

.title-apartment {
  --left-shift: 65px; /* added this */
  position: relative;
  width: 400px;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

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

.title-apartment::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #E0CA36;
  left: var(--left-shift);
}

.title-apartment .uptitle {
  position: absolute; /*changed from relative to absolute */
  right: calc(-1 * var(--left-shift)); /*added this */
  z-index: 1;
  /*margin-right: 10px;  if you want this to be hard up agains the border then remove this. If you always want it to be 10px then keep it in */
  background-color: #444F5F;
  color: #fff;
  padding: 10px;
  
}

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

<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>

P.S.我假设你希望它硬起来对边界，因此我已经删除了.title-apartment .uptitle规则中的margin-right，但恢复它，如果你希望它总是10px的边缘。

不确定我是否理解问题，但测试过，如果没有它，你就没有那个空间

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

实现目标的一种方法是做到以下几点：

• 将width: 20%;设置为.title，
• 将width: 80%;设置为.title-apartment::before。

这能解决你的问题吗？
请参阅下面的代码片段或JSFiddle。

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

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

.title-apartment::before {
  content: "";
  width: 80%;
  height: 100%;
  background-color: yellow;
  left: 65px;
}

.title-apartment .uptitle {
  position: absolute;
  right: 0;
  z-index: 1;
  background-color: blue;
  color: #fff;
  padding: 10px;
}

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

<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>