# Survey form : how to align labels and input?

**URL:** <https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030>\
**Category:** I Built This\
**Created:** [March 19, 2019, 1:51pm UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030 "2019-03-19T13:51:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tsarinaspades](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tsarinaspades/32/112496_2.png) [@tsarinaspades](https://forum.freecodecamp.org/u/tsarinaspades)\
**Post date:** [March 19, 2019, 1:51pm UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030/1 "2019-03-19T13:51:07Z")

</div>

Hello everyone! 👾

I finished the survey form project. It took me a while because I tried to align the text to the left with the input right below but I didn’t know whether to use float or flex.

I also had a hard time with responsiveness and I think I overwhelmed my CSS with too many media queries… 😓

My question here is : how can I **align the the labels with the input** to the middle (vertical)?

How can I **align the radio buttons to the left**?  
They seem to be floating around but with position:absolute I just don’t dare to touch anything… 😣

Here is the link to my Codepen  
(add codepen url before) _CodeCaptina/pen/EMbqOE_

If you see anything else that looks off to you, don’t hesitate to tell me!  
I’m here to learn 😉

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/e/d/ed70ae4ba144b09265014399dd7a31a54647f8a3.jpeg)  
_Screenshot of label misalignment_ **strong text**

---

<div class="post-metadata">

**Author:** ![shimphillip](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shimphillip/32/158663_2.png) [@shimphillip](https://forum.freecodecamp.org/u/shimphillip)\
**Post date:** [March 19, 2019, 2:45pm UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030/2 "2019-03-19T14:45:57Z")

</div>

I would simply give your parent container .row-container properties of

```auto
display: flex;
align-items: center;

```

It will level them up evenly.

---

<div class="post-metadata">

**Author:** ![tsarinaspades](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tsarinaspades/32/112496_2.png) [@tsarinaspades](https://forum.freecodecamp.org/u/tsarinaspades)\
**Post date:** [March 19, 2019, 5:09pm UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030/3 "2019-03-19T17:09:12Z")

</div>

And without using flex is that possible ?

---

<div class="post-metadata">

**Author:** ![brandon\_wallace](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brandon_wallace/32/198757_2.png) [@brandon\_wallace](https://forum.freecodecamp.org/u/brandon_wallace)\
**Post date:** [March 21, 2019, 4:17am UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030/4 "2019-03-21T04:17:57Z")

</div>

You can use line-height and height together to center items.

```auto
.row {
    line-height: 75px;
    height: 75px;
}

```

Everything in the row will be centered.

---

<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:** [February 6, 2021, 1:54pm UTC](https://forum.freecodecamp.org/t/survey-form-how-to-align-labels-and-input/266030/5 "2021-02-06T13:54:07Z")

</div>

Closed on February 6, 2021, 1:54pm UTC