JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Here the box will expand to accommodate bold text:</h4>
<span class="bold-label">Consultation Date</span>
<br><br>
<hr>

<h4>Here the box will not expand:</h4>
<span class="bold-label fix">Consultation Date</span>

CSS

.bold-label {
	display: inline;
	padding: 5px;
	border: 1px solid black;
}

span:hover {
	font-weight: bold;
	cursor: pointer;
}

.bold-label.fix {
	display: inline-block;
	width: 150px;
	text-align: right;
}

.bold-label:after {
    color: #e32;
    content: ' *';
    display: inline;
}