How to align HTML labels using CSS3 flexbox? - html

Question

I have setup a codepen so you can see what I want. Click here to open the codepen: https://codepen.io/tbellmer/pen/RdxBdQ
I am relatively new at this and while the form is functional, I need help with the aesthetics. I would like to have both the Action: and Comment: labels be right aligned. I am trying to use the most modern techniques so not looking to use a table or float.
My code uses a flexbox to have an aside section and main section. Can I use a flexbox or grid to do what I want? Also notice that I used a for some vertical spacing and suspect there is a better way to do this as well.
Your assistance will be greatly appreciated!
<div class="container">
<div class="flex-grid">
<aside class="col sidebar">
<p class = 'ctr'>Welcome</p>
</aside>
<section class="col main">
<h1 class='ctr'>Title</h1>
<hr>
<form action = '#'>
<label for = 'combo'>Action: </label>
<select id = 'combo' name = 'response' required>
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<p></p> <!-- has to be a better way to get space -->
<!-- want to have both Action: and Comment: labels line up to right -->
<label for = 'comment'>Comment: <label>
<input type=text id='comment' size='40' name='comment'>
<p></p>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</form>
</section>
</div>
</div>

Answer 1

You can create a div inside the form tag just like i did below and add a class with the
CSS
.display-align {
display: grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
HTML
<form>
<div class="display-align">
<div>
<label for = 'combo'>Action: </label>
<br><br>
<label for = 'comment'>Comment: <label>
</div>
<div>
<select id = 'combo' name = 'response' required">
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<br><br>
<input type=text id='comment' size='40' name='comment'>
</div>
</div>
<br>
<div>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</div>
</form>
You can use the <br> tag to break a line or still use the <p> .
But may I suggest to you use this instead(its basically the same, but different lol).
I use the same CSS class in this code.
<form>
<fieldset style="max-width: 400px;">
<legend>Title</legend>
<div class="display-align">
<div>
<label for = 'combo'>Action: </label>
<br><br>
<label for = 'comment'>Comment: <label>
</div>
<div>
<select id = 'combo' name = 'response' required">
<option value = ''>--none--</option>
<option value = 'A'>Approved</option>
<option value = 'R'>Rejected</option>
</select>
<br><br>
<input type=text id='comment' size='40' name='comment'>
</div>
</div>
<br>
<div>
<input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
<input class = 'button' type = 'reset' value = 'Cancel'>
</div>
</fieldset>
</form>