Form container

HTML

<div class="container overflow-hidden">
	<div class="row">
		<div class="col-sm-12 col-md-4 margin-top-block-xl">
			<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 margin-top-block-xl">
			<article class="form-column margin-top-0 ">
				<form class="gnb-form-container-gray">
					<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">
							<label for="email">Email address<span class="required">*</span><span
									class="sr-only">required</span></label>
							<input type="email" required name="email" id="email" />
						</div>
						<div class="col">
							<label for="emailconfirmation">Confirm email address<span
									class="required">*</span><span
									class="sr-only">required</span></label>
							<input type="email" required name="email" id="emailconfirmation" />
						</div>
						<div class="col">
							<label for="phone">Phone number</label>
							<input type="text" style="max-width: 10em;" id="phone" />
						</div>
					</div>
					<h3>Preferred language</h3>

					<fieldset class="gnb-radio-buttons-expanded">
						<legend>Choose your preferred language for communication about your
							application.<span class="required">*</span><span
								class="sr-only">required</span></legend>
						<div class="set">
							<div class="row">
								<div class="col-sm-6"><label for="english"><input id="english"
											type="radio" name="languagepreference" required
											value="English"><span
											class="label-title">English</span></label></div>
								<div class="col-sm-6"><label for="francais"><input id="francais"
											type="radio" name="languagepreference" required
											value="Français"><span
											class="label-title">Français</span></label>
								</div>
							</div>
						</div>
					</fieldset>
					<hr />
					<button class="gnb-button">Next</button> <button type="button"
						class="gnb-btn-secondary">Go
						back</button>
				</form>
			</article>
		</div>
	</div>
</div>