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](http://jsfiddle.net/rHh3w/1/)

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: 
[Try this](http://jsfiddle.net/LHE4W/)

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label), 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.
Just add this to your CSS code : `p{width:40%;border:1px solid #000;float:left}`

**Fiddle :**<http://jsfiddle.net/logintomyk/PSQ7u/>