JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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