Q: form, align horizontally name and email I want to align horizontally two inputs with each label on top. For example:
<form class="contact_form" action="" method="post" name="contact_form">
  <label for="name">Name</label>
  <input type="text" name="name" required>

  <label for="email">Email</label>
  <input type="email" name="email" required>

  <label for="message">Message</label> 
  <textarea name="message" id="" cols="30" rows="10"></textarea>

  <button class="submit" type="submit">Send</button>
</form>

I want to get:
Name                     Email
name's input             email's input

I've tried for a while, but I can't figure how to achieve that.
Thank you very much!

A: You have a number of options but like Ben said, they involve adding markup -- wrapping each input and label pair in a containing div.  
Option #1:
form {
    display: table;
}
div {    // containing div for your input/label pairs
    display: table-cell;
}

Option #2:
form {
    display: flex;
    flex-direction: row;
    align-items: center;    // this will center them vertically
}
div {    // containing div for your input/label pairs
    flex: 1;    // this ensures your divs are the same size horinzontally
}


A: I'd agree with using flexbox for this.


.flexform {
  display: flex;
  flex-wrap: wrap;
  background: #ccc;
  width: 50%;
  padding: 20px;
}

label, textarea, input {
  box-sizing: border-box;
  width: 100%;
}

label {
  display: block;
  padding: 10px 0px;
}

.topleft, .topright {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
}

.message {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}

.submit {
  width: 100%;
  margin: 10px;
  padding: 10px;
}
<form class="flexform" action="" method="post" name="contact_form">
  
  <div class="topleft">
    <label for="name">Name</label>
    <input type="text" name="name" required>
  </div>

  <div class="topright">
    <label for="email">Email</label>
    <input type="email" name="email" required>
  </div>
  
  <div class="message">
    <label for="message">Message</label> 
    <textarea name="message" id="" cols="30" rows="10"></textarea>
  </div>
  
  <button class="submit" type="submit">Send</button>
  
</form>



A: Try wrapping each input field (<input> and <label> pair) in a containing <div> element and use this on the divs:
display: inline-block;

With margin and padding values to make each look as you'd like. 

A: You should use table (bad method) or CSS using line breaks and inline-blocks.
Try this:
JSFiddle Example
.block {
    display: inline-block;
}

