I have the problem where ,y form is not aligning correctly when using flex box.
/* Article Styling Definitions */
article {
display: flex;
flex: 4;
background-color: chartreuse;
}
#article_left {
flex: 1;
align-content: center;
}
#article_right {
flex: 1;
align-content: center;
}
.cta {
flex: 30;
border: 1px solid black;
border-radius: 5px;
margin: 25px;
padding-left: 5px;
}
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
form > div {
flex: 45%;
}
.label {
text-align: right;
padding-right: 5px;
}
<section>
<article>
<div id="article_left">
<p>Call Us</p>
</div>
<div id="article_right">
<h2>Contact Us!</h2>
<form id="contact_form">
<div class="label">
<label for="contact_name">Full name:</label>
</div>
<div>
<input type="text" id="contact_name" name="contact_name" placeholder="Name">
</div>
<div class="label">
<label for="contact_phone">Mobile number:</label>
</div>
<div>
<input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
</div>
<div class="label">
<label for="contact_email">Email address:</label>
<div>
<input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
</div>
<div class="label">
<label for="contact_message">Message:</label>
</div>
<div>
<textarea rows="4" cols="40" id="contact_message" name="contact+message"></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</div>
</article>
</section>
I am currently studying and am completing an assessment, but I just can't work this out.
If you can assist me that would be amazing - this is a basic assignment but the flexbox is throwing everything out of whack (we have to use flex box)
I think you are looking for this.
/* Article Styling Definitions */
article {
display: flex;
flex: 4;
background-color: chartreuse;
}
#article_left {
flex: 1;
align-content: center;
}
#article_right {
flex: 1;
align-content: center;
}
.cta {
flex: 30;
border: 1px solid black;
border-radius: 5px;
margin: 25px;
padding-left: 5px;
}
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.input-box {
padding-right: 5px;
display: flex;
width: 100%;
margin-bottom: 10px;
}
label {
width: 45%;
padding-right: 5px;
text-align: right;
}
input, textarea {
width: 55%;
}
<section>
<article>
<div id="article_left">
<p>Call Us</p>
</div>
<div id="article_right">
<h2>Contact Us!</h2>
<form id="contact_form">
<div class="input-box">
<label for="contact_name">Full name:</label>
<input type="text" id="contact_name" name="contact_name" placeholder="Name">
</div>
<div class="input-box">
<label for="contact_phone">Mobile number:</label>
<input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
</div>
<div class="input-box">
<label for="contact_email">Email address:</label>
<input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
</div>
<div class="input-box">
<label for="contact_message">Message:</label>
<textarea rows="4" cols="40" id="contact_message" name="contact+message"></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</div>
</article>
</section>
Related
i have been trying to use css to create a form in the form of table but when i used display : table-row it is getting aligned to right , i need to align the form to left i tried float : left also but is is not working
#theForm {
color: white;
display: table;
padding: 15px;
background-color: #2c8f77;
border: solid 2px black;
float: left;
}
.row {
display: table-row;
}
.row > label {
display: table-cell;
padding: 2px;
text-align: right;
}
.row > input {
display: table-cell;
padding: 2px;
}
<form id="theForm" action="" method="">
<h2>Click the form below and click order to order</h2>
<p>
<div class="row">
<label for="name">Name:</label>
<input type="text" name="name" /><br /><br />
</div>
<div class="row">
<label for="Address">Address:</label>
<input type="text" name="Address" /><br /><br />
</div>
<div class="row">
<label for="Address">phone:</label>
<input type="tel" name="phone" /><br /><br />
</div>
<div class="row">
<label for="Address">email:</label>
<input type="email" name="email" /><br /><br />
</div>
</p>
</form>
Try this. Here is more on how to use flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#theForm {
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 15px;
background-color: #2c8f77;
border: solid 2px black;
float: left;
}
You need to put text-align: right; in .row and add float: left; to the label:
#theForm {
color: white;
display: table;
padding: 15px;
background-color: #2c8f77;
border: solid 2px black;
float: left;
}
.row {
display: table-row;
text-align: right;
}
.row > label {
display: table-cell;
padding: 2px;
float: left;
}
.row > input {
display: table-cell;
padding: 2px;
}
<form id="theForm" action="" method="">
<h2>Click the form below and click order to order</h2>
<p>
<div class="row">
<label for="name">Name:</label>
<input type="text" name="name" /><br /><br />
</div>
<div class="row">
<label for="Address">Address:</label>
<input type="text" name="Address" /><br /><br />
</div>
<div class="row">
<label for="Address">phone:</label>
<input type="tel" name="phone" /><br /><br />
</div>
<div class="row">
<label for="Address">email:</label>
<input type="email" name="email" /><br /><br />
</div>
</p>
</form>
I prefer to place a wrapper of the divs instead to use the form tag. Then place the inputs into the labels. Make labels table-rows.
#theForm {
color: white;
padding: 15px;
background-color: #2c8f77;
border: solid 2px black;
float: left;
}
.wrapper {
display: table;
}
.row {
display: table-row;
}
.row > label {
display: table-cell;
padding: 5px 2px;
text-align: right;
}
.row > label > span {
display: inline-block;
width: 50px;
}
.row > input {
padding: 2px;
}
<form id="theForm" action="" method="">
<h2>Click the form below and click order to order</h2>
<div class="wrapper">
<div class="row">
<label for="name">
<span>Name:</span>
<input type="text" name="name" />
</label>
</div>
<div class="row">
<label for="Address">
<span>Address:</span>
<input type="text" name="Address" />
</label>
</div>
<div class="row">
<label for="Address">
<span>phone:</span>
<input type="tel" name="phone" />
</label>
</div>
<div class="row">
<label for="Address">
<span>email:</span>
<input type="email" name="email" />
</label>
</div>
</div>
</form>
I have a small issue here with aligning three input fields in the same row with equal space between each other.
I tried to do it with display: flex and space-between but then the label is placed left to the input and not on-top.
What I want to achieve is as followed:
Then if there is more inputs I want it to "break a row" and start a new 3 input row.
How can I achieve it ?
Code snippet:
/*Stage 3 input group*/
.dInput{
margin-top: 15px;
}
.dInput label {
display: block;
padding: 6px;
color: #f8f9fa;
}
.dInput input {
padding: 5px;
margin-left: 5px;
width: 33%;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
<label for="name">Username*</label>
<input type="text" id="name">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
I think this is what you want. I hope my code is helpful to you.
/*Stage 3 input group*/
.dInput{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin-top: 15px;
}
.dInput label {
text-align:center;
display: block;
padding: 6px;
color: #000;
}
.dInput input {
padding: 5px;
margin-left: 5px;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
</div>
<div class="dInput" v-if="activeStage == 3">
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
</div>
display: flex implementation
.dInput {
margin-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.input-wrapper {
display: flex;
flex-direction: column;
max-width: 33%;
flex: 33%;
}
.dInput label {
display: block;
padding: 6px;
/* color: #f8f9fa; */
}
.dInput input {
padding: 5px;
margin-left: 5px;
width: 33%;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput">
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>
With css grid :
/*Stage 3 input group*/
.dInput{
margin-top: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-content: space-between;
justify-items: center;
background-color: violet;
gap: 1em;
padding: 1em;
}
.dInput label {
display: block;
color: #f8f9fa;
}
.dInput input {
padding: 5px;
background-color: #495057;
border-radius: 4px;
max-width: 8em;
margin-top: 1em;
}
.dInput-item {
justify-self: center;
text-align: center;
}
<div class="dInput" v-if="activeStage == 3">
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>
Wrap each label and input in a div
<div class="dInput">
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>
css:
.dInput{
margin-top: 15px;
display:flex;
justify-content: space-between;
}
Hey, so I'm trying to build a movie review site which uses a database (I'm using PouchDB) and I want to style my admin/add a review page so that the inputs and labels are all aligned in a certain way. I keep adjusting widths, padding and margins but I just cant seem to get them to align. Can someone teach me how to align them the way i want them to be please?
This is how I want them to look:
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
text-align: center;
background: red;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
input {
margin: 10px;
width: 40%;
background-color: yellow;
padding: 8px;
border: 2px;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<label for="title">Title:</label><input type="text" id="title">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="image">Image:</label><input type="text" id="image">
<label for="rating">Rating:</label><input type="number" id="rating">
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
you can use either flex or grid or both. I've used both just as an example. you could also use only grid and nest a grid within a grid.
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
background-color: green;
max-width: 100%;
padding: 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
#formTitle {
grid-column: 1/3;
}
#modifyFilmButton {
grid-column: 2/3;
width: 50%;
justify-self: end;
}
.left {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.right {
display: flex;
flex-direction: column;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>temp</title>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div class="newFilm">
<h2 id="formTitle">Create new review</h2>
<div class="left">
<label for="title">Title:</label><input type="text" id="title" />
<label for="image">Image:</label><input type="text" id="image" />
<label for="trailer">Trailer:</label><input type="text" id="trailer" /> <input type="hidden" id="id" />
<label for="rating">Rating:</label><input type="number" id="rating" />
</div>
<div class="right">
<label for="genre">Genre:</label><input type="text" id="genre" />
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis" />
</div>
<button id="modifyFilmButton">Post review!</button>
</div>
<script src="temp.js"></script>
</body>
</html>
Modified your html a little to add some structure.
I would not recommend using this code, look into bootstrap tables, or something of that nature. It will look better, and be a more scaleable solution.
.newFilm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
textarea,
input,
label {
display: block
}
textarea,
input {
width: 200px;
}
.form {
width: 100%;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="left">
<label for="title">Title:</label>
<input type="text" id="title">
<label for="genre">Genre:</label>
<input type="text" id="genre">
<label for="image">Image:</label>
<input type="text" id="image">
<label for="rating">Rating:</label>
<input type="number" id="rating">
</div>
<div class="right">
<label for="synopsis">Synopsis:</label>
<input type="text" id="synopsis">
<label for="trailer">Trailer:</label>
<textarea id="trailer" rows="5"></textarea>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</div>
</form>
</div>
</div>
Responsive solution:
.myForm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid myForm">
<div class="row">
<div class="col-lg"><h1>Create New Review</h1></div>
</div>
<form>
<div class="row">
<div class="col-md"> <!-- left column -->
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Genre</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Image</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Rating</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md"> <!-- right column -->
<div class="form-group">
<label>Synopsis</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Trailer</label>
<textarea class="form-control"></textarea>
</div>
<input class="btn btn-primary" type="submit" value="Submit" disabled>
</div>
</div>
</form>
</div>
Adjust the left/right columns to have your desired effect.
See: https://getbootstrap.com/docs/4.1/layout/grid/
Well there are couple ways to do that.
My best option would be to have one big div that would hold two smaller divs.
Then give those two divs width of 50% each - i have used grid for that.
After that you want to make sure that label and input are taking full width of their container.
Like that you will achieve most of what you want. Also for Synopsis you should use textarea not input.
Here is my example on codepen.
Here is what I did
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
color: #fff;
display: block;
text-align: left;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea {
width: 100%;
display: block;
background-color: yellow;
padding: 8px;
border: 2px;
}
#modifyFilmButton {
float: right;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="row">
<div class="col">
<label for="title">Title:</label><input type="text" id="title">
<label for="image">Image:</label><input type="text" id="image">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<label for="rating">Rating:</label><input type="number" id="rating">
</div>
<div class="col">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="synopsis">Synopsis:</label>
<textarea rows="9" id="synopsis"></textarea>
</div>
</div>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
I want to create this form in css
HTML
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>
CSS
.contact {
&__form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 105px 95px;
color: $white;
}
&__form-input,
&__form-textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
margin-bottom: 25px;
}
&__form-textarea {
height: 150px;
}
&__form-label {
padding-right: 70px;
}
}
What I'm struggling with is alignment of inputs with labels and of textarea at the same line vertically.
textarea always sticks out at the side, because of its label which has longer text than the rest.
All the help will be appreciated.
I would not use a flexbox for the form, but for each <div> inside the form. The labels are vertically centered for each input field, except for the textarea. There the label is vertically aligned at the top. You can play with top padding there when desired.
* {
box-sizing: border-box;
}
.contact__right {
background-color: gray;
}
.contact__form {
padding: 105px 95px;
width: 100%;
color: white;
}
.contact__form>div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.contact__form-input,
.contact__form-textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
}
.contact__form-textarea {
height: 150px;
}
label[for="message"].contact__form-label {
align-self: flex-start;
}
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>
Add following css code and your problem will be solved.
.contact__form-label {
vertical-align: top;}
Add this CSS rule for label:
label {
width: 100px;
display: inline-block;
vertical-align: top;
}
(otherwise label will be treated as an inline-element. This way you give it a fixed width and align it to the top)
If you don't like the alignment at the very top, you can add a padding-top ike in the following snippet:
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 105px 95px;
color: $white;
}
input,
textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
margin-bottom: 25px;
}
textarea {
height: 150px;
}
label {
width: 100px;
display: inline-block;
vertical-align: top;
padding-top: 14px;
}
.contact__right {
background: #ccc;
}
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>
ยด
You are gonna have to do that manually I guess. Normally websites tend to break line after the labels and bring the input fields to the next line.
I want to design the responsive contact form where the layout is name, email, subject fields be in one column and message field be in the another column. I could not make that message field appear in another column though I have used the width as 50%. Here is the demo
http://jsbin.com/vuxojuqeve/edit?html,css,output
The code
#responsive-form {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.form-row input {
margin: 10px 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.button {
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box
}
.half-size {
width: 50%;
}
<div id="responsive-form" class="clearfix">
<div class="half-size">
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
</div>
<div class="half-size">
<div class="form-row">
<div class="column">
<textarea class="form-control" cols="40" rows="10"></textarea>
</div>
</div>
</div>
<div class="form-row">
<div class="column">
<input type="submit" name="name" class="button">
</div>
</div>
</div>
</div>
This is what I wanted with submit button on the left column
You need to set your containers to display:inline-block, as they are block level elements by default and won't allow others to be positioned beside them.
I'm using 45% because 50% + 50% is not usually 100% when using inline-blocks because of an issue with whitespace, there are some ways around it, I'll let you decide for yourself which hack to use...
#responsive-form {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.form-row input {
margin: 10px 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.button {
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box
}
.half-size {
width: 45%;
display:inline-block;
}
<div id="responsive-form" class="clearfix">
<div class="half-size">
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
</div>
<div class="half-size">
<div class="form-row">
<div class="column">
<textarea class="form-control" cols="40" rows="10"></textarea>
</div>
</div>
</div>
<div class="form-row">
<div class="column">
<input type="submit" name="name" class="button">
</div>
</div>
</div>
</div>
If there are columns, use flexbox.
Inputs and textarea width unit is vw and e.g. min-width: 180px.
Example
body {
margin: 0;
}
::placeholder,
input[type="submit"] {
color: #BACEE7;
font-weight: bold;
}
.form {
display: flex;
justify-content: center;
padding: 15px;
}
.form input,
.form textarea {
min-width: 180px;
background: #F2F2F2;
border: 1px solid #ccc;
text-transform: uppercase;
border-radius: 3px;
text-align: center;
box-sizing: border-box;
}
.form>.inputs {
margin-right: 5px;
}
.form>.inputs>input {
width: 30vw;
display: block;
margin-bottom: 5px;
padding: 1.5vw;
}
.form>.inputs>input:last-child {
margin-bottom: 0 !important;
}
.form textarea {
width: 35vw;
padding-top: 80px;
display: block;
height: 100%;
}
.form input[type="submit"] {
background: #CA0002;
color: white;
border: none;
cursor: pointer;
}
<div class="form">
<div class="inputs">
<input type="text" name="first_name" placeholder="first name">
<input type="text" name="last_name" placeholder="last name">
<input type="email" name="email" placeholder="email">
<input type="text" name="organization" placeholder="organization">
<input type="tel" name="phone" placeholder="phone">
<input type="submit" name="submit">
</div>
<div class="textarea">
<textarea name="" id="" cols="30" placeholder="message"></textarea>
</div>
</div>