# Create HubSpot Forms with two columns that are responsive

**URL:** <https://community.hubspot.com/t/create-hubspot-forms-with-two-columns-that-are-responsive/45458>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [October 15, 2021, 9:17pm UTC](https://community.hubspot.com/t/create-hubspot-forms-with-two-columns-that-are-responsive/45458 "2021-10-15T21:17:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![PYoganathan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pyoganathan/32/43030_2.png) [@PYoganathan](https://community.hubspot.com/u/PYoganathan)\
**Post date:** [October 15, 2021, 9:17pm UTC](https://community.hubspot.com/t/create-hubspot-forms-with-two-columns-that-are-responsive/45458/1 "2021-10-15T21:17:55Z")

</div>

When creating forms from HubSpot, creating two-column forms such as adding First and Last Name side by side is causing responsive issues. The forms are not matching the full width with the full-width input fields  
Is there a way to create forms that can have input fields side by side?

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [October 16, 2021, 7:27pm UTC](https://community.hubspot.com/t/create-hubspot-forms-with-two-columns-that-are-responsive/45458/2 "2021-10-16T19:27:57Z")

</div>

Hi @PYoganathan ,

Try adding this CSS to the pages that you show your forms on:

```lia-code-sample
.hs-form .form-columns-0 .input,
.hs-form .form-columns-1 .input,
.hs-form .form-columns-2 .input {
 margin-right: 0 !important;
}

.hs-form .form-columns-2 .hs-form-field {
 width: calc(100% / 2 - 0.5rem) !important;
 float: left;
}
@media screen and (max-width: 650px) {
 .hs-form .form-columns-2 .hs-form-field {
 width: 100% !important;
 }
}
.hs-form .form-columns-2 .hs-form-field:last-child {
 float: right !important;
}

```

This only works if you set it as ‘Raw HTML Form’ in the styling options.

---

<div class="post-metadata">

**Author:** ![erod](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erod/32/99705_2.png) [@erod](https://community.hubspot.com/u/erod)\
**Post date:** [October 18, 2021, 5:45pm UTC](https://community.hubspot.com/t/create-hubspot-forms-with-two-columns-that-are-responsive/45458/3 "2021-10-18T17:45:53Z")

</div>

Hi @PYoganathan, it’s definitely possible but it can be messy. What @Teun suggested could work so I’d try that first but you could run into problems if you have other CSS already working in the background. Do you have a link to the page you could share with us.

Cheers,

Edgar