# Form Project: input items not coming in same line

**URL:** <https://forum.freecodecamp.org/t/form-project-input-items-not-coming-in-same-line/254617>\
**Category:** General\
**Created:** [January 26, 2019, 6:23pm UTC](https://forum.freecodecamp.org/t/form-project-input-items-not-coming-in-same-line/254617 "2019-01-26T18:23:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanjana-1604](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sanjana-1604/32/76756_2.png) [@sanjana-1604](https://forum.freecodecamp.org/u/sanjana-1604)\
**Post date:** [January 26, 2019, 6:23pm UTC](https://forum.freecodecamp.org/t/form-project-input-items-not-coming-in-same-line/254617/1 "2019-01-26T18:23:52Z")

</div>

Please check my code below and help me in styling the items in same vertical line please

> **[Survey Form](https://codepen.io/SanjanaSethiya/pen/RvrRJL)**
>
> ...

when I am giving each element left property a hardcoded value like 220px then it looks fine then too radio buttons and check boxes are not coming in same line but with this approach on changing the screen size all design gets messed up.

please suggest the best way to do it right.

---

<div class="post-metadata">

**Author:** ![ChrisCline1138](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chriscline1138/32/111745_2.png) [@ChrisCline1138](https://forum.freecodecamp.org/u/ChrisCline1138)\
**Post date:** [January 26, 2019, 6:41pm UTC](https://forum.freecodecamp.org/t/form-project-input-items-not-coming-in-same-line/254617/2 "2019-01-26T18:41:59Z")

</div>

your text is aligned to center which will keep them from lining up  
try placing your elements within a container like this:

```auto
<div class="any-name">
          <label for="email" id="email-label" class="label">*Email:</label>
          <input type="email" class="form-items" id="email" placeholder="Please enter valid email ID" required>
</div>

```

then in css you set a width for the parent container and how much space within that parent container each child is allotted

```auto
.any-name{width: 80%;}
.label{width: 40%:
         text-align: center}
.form-item{width: 60%;
         text-align: left;}
             

```

this needs to change as well:

```auto
.grid-container
{
  background-color: white;
   width: 70vw;
   justify-content: center;
 margin:auto;
   padding:10px;
}

```

you have to declare a display of grid for it to work

```auto
.grid-container
{ display: grid;
  background-color: white;
   width: 70vw;
   justify-items: center; /*horizontal center*/
align-items: center; /*vertical center*/
/*margin:auto; not needed*/
   padding:10px;
}

```

be aware though that this will only center your form division within this container, it will not apply to any of the elements within your form.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:05pm UTC](https://forum.freecodecamp.org/t/form-project-input-items-not-coming-in-same-line/254617/3 "2021-01-17T20:05:58Z")

</div>

Closed on January 17, 2021, 8:05pm UTC