JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li><span>Element-Name</span><span>></span></li>
    <li><span>I-want-to-fit-like-the-li-width</span><span>></span></li>
    <li><span>My-width-doenst-fit</span><span>></span></li>
</ol>

CSS

ol > li {
    list-style-type: none;
    padding: 0px;
	margin: 0px;
	border: 0px;
	margin-top: 15px;
}

li > span:nth-child(1) {
	margin-right: 3px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	width: 100%;
}

li > span {
	padding: 5px;
	color: #c7c7c7;
	border: 1px #ccc solid;
	background: #fff;
}

li > span:nth-child(1) {
	margin-right: 3px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

li > span:nth-child(2) {
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

li > span:nth-child(1):hover {
	border: 1px #1c1c1c solid;
	cursor: pointer;
}

li > span:nth-child(2):hover {
	border: 1px #1c1c1c solid;
	cursor: pointer;
}