JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<div class="mb-3 form-floating input-group">
<span class="input-group-text">My name is</span>
<input class="form-control" placeholder="Name" type="text" value="" name="person[name]" id="person_name">
<label class="form-label" for="person_name">Name</label>
</div>
<div class="mb-3 input-group">
<span class="input-group-text">My name is</span>
<div class="form-floating">
<input class="form-control" placeholder="Name" type="text" value="" name="person[name]" id="person_name">
<label class="form-label" for="person_name">Name</label>
</div>
</div>