Aligning input boxes on a form side by side - html

Question

I am trying to align to input text boxes of a form side by side but i not able to do so. Please help.
Fiddle: here
HTML:
<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span>
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>
CSS:
.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}

Answer 1

http://jsfiddle.net/rHh3w/12/show
Just need to set your p element to "display:inline;" by default they are block elements and will not align next to each other.
also deleted two br tags
p {display:inline;}

Answer 2

How about display them like a table.
.myForm {
width:100%;
display:table;
}
.myForm div {
margin:0;
padding:0;
display:table-cell;
}
.myForm div:last-of-type{
text-align:right;
}
.myForm div:last-of-type Align text to the right side.
Check it on http://jsfiddle.net/463QF/

Answer 3

Remove <br /> from your HTML markup.
Write:
p{
display:inline-block;
width:50%;
}
.wpcf7-form-control-wrap input[type="text"],.wpcf7-form-control-wrap input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
Note:
inline-block leaves white space between elements. Write elements on same line to avoid it.
Like write
</p><p>
(on same line)
rather than
</p>
<p>
(on different lines)
Fiddle.

Answer 4

Try this
What I have done is added the following:
p {
float: left;
}
That's all you need to do, it also means that if your container width goes below the fixed width of the two input boxes together, they will float down over two lines rather than breaking and spilling out of their container.
While you're at it, it might be worth changing the text labels to actual labels, this will allow the user to click on the label and still highlight the form, which is growing increasingly important due to the rise in mobile use.
Also, you missed a closing > of your first input box.

Answer 5

Try below CSS for p tag
p
{
width:auto;
float:left;
margin-right:10px;
}
If you need some space between text box then u can set margin-right to the same.

Answer 6

Just add this to your CSS code : p{width:40%;border:1px solid #000;float:left}
Fiddle :http://jsfiddle.net/logintomyk/PSQ7u/

Answer 7

HTML example:
<div class="myForm">
<div>
<label for="name">Your name</label>
<input name="name" id="name" type="text" />
</div>
<div>
<label for="email">your email</label>
<input name="email" id="email" type="text" />
</div>
</div>
CSS:
.myForm div {
width: 47%;
margin:0;
padding:0;
float:left;
}
.myForm div label
{
display:block;
}
fiddle