I need help aligning the inputs in my form to match the image provided https://i.sstatic.net/AXhlp.png. I attempted to center the div using <center>, but I am unsure how to properly align the elements based on the image reference.
<center>
<div>
<div>
<center>
Priority:
<input align="middle" type="radio" id="high" name="priority" value="High">
High
<input type="radio" id="medium" name="priority" value="Medium">
Medium
<input type="radio" id="low" name="priority" value="Low">
Low
</center>
</div>
<br />
<div>
<label for="subject">Subject: </label>
<input type="text" id="subject" name="subject">
</div>
<br />
<div>
<label for="appointment_date">Date: </label>
<input type="date" id="appointment_date" name="appointment_date">
<label for="start_time">Start Time</label>
<input type="time" id="start_time" name="start_time" />
<label for="end_time">End Time</label>
<input type="time" id="end_time" name="end_time"/>
</div>
<br />
<input type="button" onclick="addAppointment()" value="Add Appointment" />
<br />
</div>
<hr>
</center>Any assistance would be greatly appreciated. Thank you!