JSFiddle - React, Tailwind, and code Playground

HTML

<div class="required">
    <label>First Name:</label>
    <input type="text">
</div>
<div class="required">
    <label>Middle Initial:</label>
    <input type="text" class="short">
</div>
<div class="required">
    <label>Last:</label>
    <input type="text">
</div>

CSS

label {background-color:orange; width:100px; display:block; float:left; clear:both;}
div {background-color: #ccc; width: 220px;}
input {width: 100px; float:right;}
.short {width: 20px;}

.required:after { content:" *"; }