Title: Field Title Alignment
Last modified: February 23, 2018

---

# Field Title Alignment

 *  [CucumberandCompany](https://wordpress.org/support/users/cucumberandcompany/)
 * (@cucumberandcompany)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/field-title-alignment/)
 * I’ve used the CSS below to make Contact Form 7 have fields side by side, but 
   have ran into the problem of the field titles (specifically phone and your message)
   not being aligned properly.
 * Ideally “phone” would not hang over the left edge of its box and “your message”
   would be on the far left in line with “email” and “your name”.
 * Does anyone know how I can fix this?
 * #two-column{
    width: 100%; } #two-column p{ margin-bottom: 30px; color: #cccccc;
   text-align: left; } #two-column input[type=”text”]{ border: none; border: 1px
   solid #CCCCCC; font-size: 14px; padding: 15px 20px; } #two-column input[type=”
   email”]{ border: none; border: 1px solid #CCCCCC; font-size: 14px; padding: 15px
   20px; } #two-column input[type=”submit”]{ padding: 15px 20px; background:#222;
   color:#CCCCCC; border: 1px solid #CCCCCC; float:right; font-size: 14px; -webkit-
   border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #two-column
   textarea { position: relative; width: 100%; } #two-column input[type=”submit”]:
   hover{ background:#CCCCCC; color:#CCCCCC; border: 1px solid #CCCCCC; }
 * #two-column #left{
    width: 50%; float: left; } #two-column #left input[type=”
   text”]{ width:95%; }
 * #two-column #right{
    width: 50%; float: right; } #two-column #right input[type
   =”text”]{ width: 95%; float: right; }
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffield-title-alignment%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [plavalle](https://wordpress.org/support/users/plavalle/)
 * (@plavalle)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/field-title-alignment/#post-10008769)
 * The issue here is not the plugin.
 * double check the code you have used to build the section.
 * You have the two-column div, then a paragraph, then two divs (left/right) that
   are floated, followed by two more paragraphs.
 * Set the paragraphs width to 100%, this will fix the your message section.
 * Remove the width of 95% on #two-column #right input[type=”text”].
 * For the paragraph holding the phone input add padding: 0 0 0 5%;
    For the paragraph
   holding the email input add padding: 0 5% 0 0;

Viewing 1 replies (of 1 total)

The topic ‘Field Title Alignment’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 1 reply
 * 2 participants
 * Last reply from: [plavalle](https://wordpress.org/support/users/plavalle/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/field-title-alignment/#post-10008769)
 * Status: not resolved