JSFiddle - React, Tailwind, and code Playground

HTML

<p class="field-wrapper required-field">
    <label>Required field</label>
    <input type="text" name="pname" id="pname" size=18 maxlength=50 required value="" />
</p>
<p class="field-wrapper">
    <label>Optional field</label>
    <input type="text" name="pname" id="pname" size=18 maxlength=50 required value="" />
</p>

CSS

p.field-wrapper {
    display: block;
    width: 100%;
}
p.field-wrapper label::after { 
    content: "\00a0\00a0 "; /* keeps spacing consistent */
}
p.field-wrapper input {
    float: right;
}
p.required-field label::after { 
    content: "*";
    color: red;
}