How to properly align background with before content

I have this html structure:

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

I've added a background title-apartment using the :before property. My goal is have the span within uptitle aligned to the border, the problem's that when I change the resolution the content doesn't stick to the right border:

This is my 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;
      }
  }
}

I tried to keep the span with the dark blue background attached to the right yellow background using the translateX property, but no luck so far.

Any idea to fix this?

Since you're shifting your :before pseudo element right by 65px, the .uptitle element doesn't know where this is as it's a sibling rather than a child. The easiest thing to do is to set up a css custom property to record how far you're shifting the :before pseudo element then shift the .uptitle element right by the same amount. If we use the right property then our reference point will be the right border but it'll have to be a negative value to then shift that element right. Hence the calc in there.

Marked up code below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

P.S. I've assumed you want it hard up against the border hence I've removed the margin-right in the .title-apartment .uptitle rule but reinstate it if you want it always to be 10px from the edge.

One way to achieve your goal is to do the following:

• set width: 20%; to the .title and
• set width: 80%; to the .title-apartment::before.

Does this solve your problem?

See the snippet below or JSFiddle.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

Not sure if I understood the problem but tested and without it you don't have that space

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