JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	50%
	<div class="prog"></div>
</div>

CSS

.wrapper{
	width: 250px;
	border: 1px solid #000;
	text-align: center;
	position: relative;
}
.wrapper:before{
	position: absolute;
	content: "0";
	left: 2px;
}
.wrapper:after{
	position: absolute;
    top: 0;
	content: "5";
	right: 2px;
}
.prog{
	background: #F2F0E3;
	height: 100%;
	width: 50%;
}