I'm currently working on a project that involves using a form for project-based learning. However, I'm having trouble getting the form input to display in two columns. To achieve this, I've set up a main div called "container" with two nested divs inside it - "left" and "right". I've used the float property to align these divs next to each other. The left div displays a background image while the right div contains the form. My goal is to structure the form into two columns - with first name and last name in the first column, email and telephone in the second column, and password and confirm password in the third column. I tried using the flex property but couldn't get it to work. Any suggestions on how to achieve this two-column layout for the form?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">
<div class="bg">
<img src="odin-lined.png" alt="">
<h1>ODIN</h1>
</div>
</div>
<div class="right">
<p>This is not a real online service! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Necessitatibus, commodi!
Sign up now to get started.</p>
<form action="">
<div class="input">
<label for="first name">FIRST NAME</label>
<input type="text">
</div>
<div class="input">
<label for="last name">LAST NAME</label>
<input type="text">
</div>
<div class="input">
<label for="email">EMAIL</label>
<input type="email">
</div>
<div class="input">
<label for="telephone">TELEPHONE</label>
<input type="tel">
</div>
<div class="input">
<label for="password">PASSWORD</label>
<input type="password">
</div>
<div class="input">
<label for="password">CONFIRM PASSWORD</label>
<input type="password">
</div>
</form>
</div>
</div>
</body>
</html>
Here is the CSS
.
.left{
float: left;
width: 50%;
}
.right{
float: right;
width: 50%;
}
.bg{
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 500px;
}
.bg img{
width: 150px;
height: 150px;
margin: 40px;
}