JSFiddle - React, Tailwind, and code Playground
HTML
<p class="pfield-wrapper required-field"> <label>Start Date</label><input id="datepicker1" type="text" name="s" style="width:155px;" required value=""></p>
<p class="p">End Date<input id="datepicker2" type="text" name="e" style="width:155px;" value=""></p>
CSS
p.pfield-wrapper input {
float: right;
}
p.pfield-wrapper::after {
content: "\00a0\00a0 "; /* keeps spacing consistent */
float: right;
}
p.required-field::after {
content: "*";
float: right;
margin-left: -3%;
color: red;
}
JavaScript
$(function () {
var $dp1 = $("#datepicker1");
$dp1.datepicker({
minDate:0,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});
var $dp2 = $("#datepicker2");
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});