message box to show in right column - html

Question

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

Answer 1

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>

Answer 2

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>