CSS - create a dynamic "tag" shape facing to the right

Question

I'm trying to create a "price tag" shape using CSS, with the sharper edge facing to the right. When the edge of the tag is facing left, there's no problem adding text (be it short or long), since the triangle is static and only the rectangle is stretching.

I need to create the same thing but with "elastic" right facing triangle, to keep using only one class and not a dedicated class for each text length.

For both examples please see this fiddle.

.pricetag {
  position: relative;
  margin: 0 5px 0 10px;
  displaY: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag:after {} .pricetag:before {
  position: absolute;
  content: "";
  left: -15px;
  width: 1px;
  height: 0px;
  border-right: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}
/**********/

.pricetag-right {
  position: relative;
  margin: 0 5px 0 10px;
  displaY: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag-right:after {} .pricetag-right:before {
  position: absolute;
  content: "";
  left: 382px;
  width: 1px;
  height: 0px;
  border-left: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}

<span class="pricetag">no problem with long text</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>

Answer 1

You just need to position the arrow according to the right side of the tag with the right property instead of the left property :

.pricetag {
  position: relative;
  margin: 0 5px 0 10px;
  display: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag:before {
  position: absolute;
  content: "";
  left: -15px;
  width: 1px;
  height: 0px;
  border-right: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}
/**********/

.pricetag-right {
  position: relative;
  margin: 0 5px 0 10px;
  display: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag-right:before {
  position: absolute;
  content: "";
  right: -15px;
  width: 1px;
  height: 0px;
  border-left: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}

<span class="pricetag">no problem with long or short text (length auto adjusts)</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>
<br/>
<br/>
<span class="pricetag-right">need to create a nqsdqsdqsdqsdqsdqsdew class for each length</span>