How can I make the input tag so that it is looks as if it is in 2 columns?
name email
phone subject
instead of all input being inline?
type or paste code here
<section id="contact">
<div class="title">
<h1>Booking & Management</h1>
<p>feel free to get in touch</p>
</div>
<div class="contact-box">
<div class="contact-left">
<h3>Sent your request</h3>
<form>
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" required>
</div>
<div class="input-group">
<label>Email</label>
<input type="email" required>
</div>
<div class="input-group">
<label>Phone</label>
<input type="number">
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" required>
</div>
</div>
</form>
</div>
<div class="contact-right">
<h3>Follow</h3>
</div>
</div>
</section>
#contact {
background:wheat;
min-height:100vh;
width:100%;
display:flex;
position: relative;
font-size:20px;
}
.title {
position:absolute;
top:140px;
left:50px;
}
.contact-box {
background:white;
display:flex;
z-index:2;
position:absolute;
top:240px;
left:50px;
width:80%;
margin:50px auto;
}
.contact-left {
flex-basis: 60%;
padding:40px 60px;
}
.contact-right {
flex-basis:40%;
padding:40px;
background: blue;
}
#contact h1 {
position: relative;
top:0px;
}
.input-row {
display: flex;
justify-content: space-between;
margin-bottom:20px;
}
.input-row .input-group {
flex-basis:45%;
}
input {
width:100%;
border: none;
border-bottom: 1px solid black;
outline:none;
padding-bottom:5px;
}