Label

<div style="display: flex; padding: 0 20px; flex-wrap: wrap; gap: 15px; align-items: center;">
  <Label.label class="DemoLabelRoot" for="firstName">
    First Name
  </Label.label>
  <input class="DemoInput" type="text" id="firstName" value="Pedro Duarte" />
</div>

/* reset */
input {
	all: unset;
}

.DemoLabelRoot {
	font-size: 15px;
	font-weight: 500;
	line-height: 35px;
	color: white;
}

.DemoInput {
	width: 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 0 10px;
	height: 35px;
	font-size: 15px;
	line-height: 1;
	color: white;
	background-color: var(--black-a2);
	box-shadow: 0 0 0 1px var(--black-a6);
}

.DemoInput:focus {
	box-shadow: 0 0 0 2px black;
}

.DemoInput::selection {
	background-color: var(--black-a6);
	color: white;
}