Check out my codepen to see what I need by clicking on this link: https://codepen.io/tbellmer/pen/RdxBdQ
I am new to this and although the form works, I require help with the design. I want both the Action: and Comment: labels to be aligned to the right. I prefer using modern techniques instead of tables or floats.
Currently, I am using a flexbox for an aside section and main section. Can I achieve what I want using flexbox or grid? Also, there is some vertical spacing done with
and I suspect there might be a better way to do it.Your help 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> <!-- Is there a better way for spacing? -->
<!-- Want both Action: and Comment: labels to line up to the 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>