I have a badge that I am trying to build and I can’t seem to figure out the css, I’ve tried so many different variants and it keeps breaking, here is what I am trying to achieve:

What I am getting:

For some reason the text keeps disappearing, but I want the text to be fitted within the containers that they are in as well as the size being different depending on that container, you will see I have java that automatically adjusts the sizing, I just need it to fit properly but still have that look, I’m not sure why they don’t work the code seems in-tact
I can give you all my code:

<style>
.outer-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  width: 225px;
  height:100px;
}

.containers {
  display: flex;
  align-items:center;
  padding:10px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.was {
  background-color: #101f2d;
  color: white;
  border-radius: 10px 10px 0px 0px;
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px;
  box-sizing: border-box;
}

.now {
  background-color: #fa4515;
  color: white;
  border-radius: 0px 10px 10px 10px;
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.each {
  font-size: 0.5rem;
  display: block;
  text-align: end;
  width: 100%;
}

.decimal-each {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 100%; 
}

.price-container {
  display: flex;
  align-items: ;
  height: 100%;
}

  .was-price{
    font-size: calc(0.7em + 1vw);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
  }
  .now-price {
    font-size: calc(1.8em + 1vw);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .was-text{
    font-size:calc(0.5em + 1vw);
  }
  .now-text{
    font-size:calc(0.7em + 1vw);
  }
</style>

<div class="outer-container">
  <div class="was containers">
    <div class="price-container">
      <span class="was-text">Was</span>
      <span class="was-price">R599</span>
    </div>
    <div class="decimal-each">
      <span class="was-text">99</span>
      <span class="each">each</span>
    </div>
  </div>
  <div class="now containers">
    <div class="price-container">
      <span class="now-text">Now</span>
      <span class="now-price">R399</span>
    </div>
    <div class="decimal-each">
      <span class="now-text">99</span>
      <span class="each">each</span>
    </div>
  </div>
</div>
  <script>
    function adjustFontSize() {
      const priceElements = document.querySelectorAll('.was-price, .now-price');
      
      priceElements.forEach(el => {
        const containerHeight = el.parentElement.offsetHeight;
        el.style.fontSize = `${containerHeight * 1}px`;
      });
    }

    window.addEventListener('load', adjustFontSize);
    window.addEventListener('resize', adjustFontSize);
  </script>