Form container

HTML

<section class="gnb-section-gray">
	<div class="container">
		<div class="container overflow-hidden">
			<div class="row">
				<div class="col-sm-12 col-md-4">
					<aside class="gnb-progress-steps-nav">
						<h2>How to apply</h2>
						<ul class="gnb-progress-steps-circle">
							<li class="complete">
								<div><a href="#">1. Read and accept terms</a></div>
							</li>
							<li class="current">
								<div>2. Contact information</div>
							</li>
							<li>
								<div>3. Grant application</div>
							</li>
							<li>
								<div>4. Review and submit</div>
							</li>
						</ul>
					</aside>
				</div>
				<div class="col">
					<form class="gnb-form-container">
						<h2>Contact information</h2>
						<p>Enter your contact information and select your preferred language.</p>
						<div class="row row-cols-1 margin-bottom-md">
							<div class="col">
								<label for="firstname">First name<span class="required">*</span><span
										class="sr-only">required</span></label>
								<input type="text" required name="firstname" id="firstname" />
							</div>
							<div class="col">
								<label for="lastname">Last name<span class="required">*</span><span
										class="sr-only">required</span></label>
								<input type="text" required name="lastname" id="lastname" />
							</div>
							<div class="col">
								<!-- Basic email field with validation -->
								<div class="gnb-form-input">
									<label for="email-address">Email address<span class="required">*</span><span
											class="sr-only">required</span></label>
									<input id="email-address" class="gnb-field-md" name="email-address"
										autocomplete="email" type="email" required
										oninput="validateEmail(this)">
									<div class="gnb-form-validation" id="email-error" style="display: none;">
									</div>
								</div>
							</div>
							<div class="col">
								<!-- Phone number with input mask and validation -->
								<div class="gnb-form-input">
									<label for="phone-number">Phone number <span class="required">*</span><span
											class="sr-only">required</span></label>
									<input type="tel" id="phone-number" name="phone"
										aria-describedby="phone-error" onblur="validatePhoneNumber(this)">
									<div class="gnb-form-validation" id="phone-error" style="display: none;">
									</div>
								</div>
							</div>
						</div>
						<h3>Preferred language</h3>

						<!-- Radio button group -->
						<fieldset class="gnb-radio-buttons">
							<legend>Choose your preferred language for communication about your application<span
									class="required">*</span><span class="sr-only">required</span>
							</legend>
							<div class="pair">
								<input type="radio" name="languagepreference" id="english" value="English">
								<label for="english">English</label>
							</div>
							<div class="pair">
								<input type="radio" name="languagepreference" id="french" value="French">
								<label for="french">French</label>
							</div>
						</fieldset>

						<hr />
						<button class="gnb-button">Next</button>
						<button type="button" class="gnb-btn-secondary">Go back</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>