Currently, I am in the process of creating a registration form and experiencing some issues with spacing and positioning. How can I adjust them to be aligned on the same line in a symmetrical manner? Below is the code snippet I have added along with an image showing how it currently appears.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c0b0b10e07120f02233124571d13090d32">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form>
<!--First Name-->
<div class="mb-3 mt-3">
<label for="fname" class="form-label">First name:</label>
<input type="fname" class="form-control-xs" id="fname" placeholder="Enter name" />
</div>
<!--Last name-->
<div class="mb-3 mt-3">
<label for="lname" class="form-label">Lastname:</label>
<input type="lname" class="form-control-xs" id="lname" placeholder="Last name" />
</div>
<!--Email-->
<div class="mb-3 mt-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" class="form-control-xs" id="email" placeholder="Enter email" />
</div>
<!--Country-->
<div class="mb-3 mt-3">
<label for="city" class="form-label">City of residence:</label>
<input type="city" class="form-control-xs" id="city" placeholder="City" />
</div>
<!--Button-->
<input type="submit" value="Register" />
<!--mandatory check box-->
<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required>By checking this box you agree to the
<!--TERMS OF USE-->
<a href="useragreement.html">user agreement</a>
<!--PARAGRAPH-->
<p>If you click the "Register" button, the form-data will be sent to the owner of the website.</p>
<p>Already have an account?</p>
<a href="../sign in/login.html"><button type="button">Sign In</button></a>
</form>I aim to achieve a symmetrical layout where all elements are in the same line. Apologies for any grammatical errors in my request.