Contact Form not displayed as Block - html

Question

I'm trying to make a contact form in Reactjs for my website, but I'm unable to make the form itself be displayed as a block. Right now, the form is being displayed as if it were on the same line, despite the display being set to block.
I'm not sure why I'm having this problem
Relevant Code
ContactPage.js
import React from 'react';
// CSS import statements
import '../css/Base.css';
import '../css/ContactPage.css';
// Component import statements
function Contact() {
return(
<div className='container'>
<div className='contact-form'>
Fields marked with an * are required.
<label for="name">Name *</label>
<input type="text" name="name" />
<label for="email">Email *</label>
<input type="text" name="email" />
<label for="subject">Subject *</label>
<input type="text" name="subject" />
<label for="message">Message *</label>
<input type="text" name="message" />
<button>Submit</button>
</div>
</div>
)
}
export default Contact;
ContactPage.css
.contact-form {
display: block;
padding: 0px 10px;
}

Answer 1

Try this.
ContactPage.js
import React from 'react';
// CSS import statements
import '../css/Base.css';
import '../css/ContactPage.css';
// Component import statements
function Contact() {
return(
<div className='container'>
<div id='contact-form'>
Fields marked with an * are required.
<div className='row'>
<div className="label">
<label for="name">Name *</label>
</div>
<div class="form-input">
<input type="text" name="name" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="email">Email *</label>
</div>
<div className="form-input">
<input type="text" name="email" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="subject">Subject *</label>
</div>
<div className="form-input">
<input type="text" name="subject" className="form-control"/>
</div>
</div>
<div className='row'>
<div className="label">
<label for="message">Message *</label>
</div>
<div className="form-input">
<input type="text" name="message" className="form-control"/>
</div>
</div>
<div className='form-button'>
<button>Submit</button>
</div>
</div>
</div>
)
}
export default Contact;
ContactPage.css
#contact-form {
display: block;
padding: 0px 10px;
}
.row:after{
content: "";
display: table;
clear: both;
}
.form-button{
margin-top:10px;
}
.label {
float: left;
width: 15%;
margin-top: 6px;
}
.form-input{
float: left;
width:50%;
margin-top: 6px;
}
Preview --> https://codesandbox.io/s/vigilant-lumiere-ue3k1?file=/src/App.js

Answer 2

Re-edit your contact form structure to this:
HTML
<div className='contact-form'>
Fields marked with an * are required.
<div class="form-group">
<label for="name">Name *</label>
<input type="text" name="name" />
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="text" name="email" />
</div>
<div class="form-group">
<label for="subject">Subject *</label>
<input type="text" name="subject" />
</div>
<div class="form-group">
<label for="message">Message *</label>
<input type="text" name="message" />
</div>
<button>Submit</button>
</div>
Wrap it inside a div called form-group and in your css
ContactPage.css
.contact-form {
display: block;
padding: 0px 10px;
}
.contact-form .form-group {
width:100%;
display:block;
position: relative;
}
.contact-form .button {
display:block;
margin:0 auto;
}