JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frame">
			<div class="items"><span class="items_list">H</span><span class="items_name">категория<span class="items_subname">название</span></span><span class="items_minus">-</span><span class="items_value">333</span><span class="items_plus">+</span><span class="items_unit">ез.</span><span class="items_del">X</span></div>
		</div>

CSS

#frame{
	width:300px;
	padding:10px;
	background:green;
	margin:0 auto;
	text-align:center;
}
.items{
	background:blue;
	color:red;
	border-radius:1em;
}
.items span{
	display:inline-block;
    vertical-align: middle;
}
.items_list{
	width:5%;
}
.items_name{
	width:68%;
	text-align:left;
}
.items_minus{
	width:4%;
}
.items_value{
	width:8%;
}
.items_plus{
	width:4%;
}
.items_unit{
	width:7%;
}
.items_del{
	width:4%;
}
span.items_subname{
	display:block;
}