I'm currently working on an HTML page that includes a form and some information. I've created two classes in CSS - one for the form called .contactform, and another for the information called .contactinformatie.
My aim is to position the information next to the form, but unfortunately, it's not displaying as intended. Here is the current layout of my page (the information appears below the form instead of beside it):
Could you please provide guidance on how I can resolve this issue?
Below are snippets of my HTML code:
<div class="contactform">
<h3> Your Information: </h3>
<form action="">
Name*<br>
<input type="text" name="Name" value="Tom">
<br><br>
Email Address*<br>
<input type="text" name="email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e7a61634e69636f6762206d6163">[email protected]</a>">
<br><br>
Phone Number<br>
<input type="text" name="phone number" value="020-694-2033">
<br><br>
Your Inquiry<br>
<textarea id="txtarea" rows="10" cols="70" value="How can I add a flight number?"></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="contactinformatie">
<p>You can reach us by phone 24 hours a day</p> <p>020-5 160 160</p>
<br>
<p>Email: </p> <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcc8d9cfc8fcd4cadd92d2d0">[email protected]</a></p>
<br><br><p>Address: </p> <p>Wibautstraat 44</p>
</div>
Here's a snippet of my CSS code:
.contactinformatie {
float:right;
margin: auto;
width: 48%;
height: 50%;
}
.contactform {
margin-top: 80px;
margin-left: 50px;
}
If possible, could you advise me on how to properly align the information next to the form using CSS?