JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contract-price-block category-view">
  <span class="cc-product-price-range list-price">12</span>
  <span class="cc-product-price-range list-price-label">list-price</span>
</div>

<div class="contract-price-block category-list-view">
  <span class="cc-product-price-range list-price">12</span>
  <span class="cc-product-price-range list-price-label">list-price</span>
</div>

CSS

.contract-price-block{
  display: flex;
}
.contract-price-block.category-view .list-price:after {
  content: "\00a0";
}
.contract-price-block.category-list-view .list-price-label:after {
  content: "\00a0";
}
.contract-price-block.category-view .list-price,
.contract-price-block.category-list-view .list-price-label {
  order: 1;
}
.contract-price-block.category-view .list-price-label,
.contract-price-block.category-list-view .list-price {
  order: 2;
}

.contract-price-block {
                .cc-product-price-range.list-price {
                  display: inline-block;
                }
                .cc-product-price-range.contract-price {
                  display: inline-block;
                }
                .cc-product-price-range {
                  &.list-price-label {
                    font-size: 1rem;
                    display: inline-block;
                    font-weight: 400;
                    color: #999b9c;
                  }
                  &.contract-price-label {
                    font-size: 1rem;
                    display: inline-block;
                    font-weight: 400;
                  }
                }
              }
              }