Could someone please help me with aligning my labels to be inline and right-justified against form elements? Currently, I'm facing this issue: this
section {
display: flex;
flex-direction: row;
justify-content: center;
width: 960px;
margin: 0 auto;
}
.feedback_right {
display: flex;
flex-direction: row;
flex: 1;
}
/* Contact Form Styling */
form#contact_form {
display: flex;
flex-direction: column;
padding: 0;
margin: auto;
}
form#contact_form p {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}
form#contact_form p > label {
display: inline-block;
padding-right: 2px;
text-align: right;
}
form#contact_form p > input {
font-family: monospace;
font-size: 1em;
}
button {
display: inline-block;
width: 25%;
margin: 0 0 0 auto;
margin-bottom: 5px;
}<section>
<div class="feedback_right">
<form id="contact_form">
<p>
<label for="contact_name">Full Name:</label>
<input type="text" id="contact_name" name="contact_name" placeholder="Name">
</p>
<p>
<label for="contact_email">Email Address:</label>
<input type="email" id="contact_email" name="contact_email" placeholder="Email">
</p>
<p>
<label for="contact_number">Mobile Number:</label>
<input type="tel" id="contact_number" name="contact_number" placeholder="Mobile Number">
</p>
<p>
<label for="victoria">Victoria</label>
<input type="radio" id="victoria" name="victoria">
</p>
<p>
<label for="queensland">Queensland</label>
<input type="radio" id="queensland" name="queensland">
</p>
<p>
<label for="new_south_wales">New South Wales</label>
<input type="radio" id="new_south_wales" name="new_south_wales">
</p>
<p>
<label for="act">Australian Capital Territory</label>
<input type="radio" id="act" name="act">
</p>
<p>
<label for="tasmania">Tasmania</label>
<input type="radio" id="tasmania" name="tasmania">
</p>
<p>
<label for="south_australia">South Australia</label>
<input type="radio" id="south_australia" name="south_australia">
</p>
<p>
<label for="western_australia">Western Australia</label>
<input type="radio" id="western_australia" name="western_australia">
</p>
<p>
<label for="northern_territory">Northern Territory</label>
<input type="radio" id="northern_territory" name="northern_territory">
</p>
<p>
<label for="contact_message">Message:</label>
<textarea rows="4" cols="40" id="contact_message" name="contact_message" placeholder="Message"></textarea>
</p>
<button type="submit">Submit</button>
</form>
</div>
</section>I'm looking to keep the submit button in its current position while fixing the alignment of labels against the input elements. My goal is to achieve a layout similar to this, without the vertical divider line.