CSS Form Formatting Issue

b3u · November 8, 2018, 8:22pm

I whipped up a quick form here for my question.
What I want to know is: On a form of a fixed width of, say, 200px, how can I have the labels and inputs side by side, and have the inputs take up all of the width not taken up by the inputs?

Meaning, like this:

Form
label input input input input in
label label input input input

Thanks!
~
@b3u

nick2o · November 8, 2018, 10:04pm

Put the input inside the label

<label for="name">Name:<input name="name" type="text"></label>

Give the lavel a min-width that is small. Ffor some reason the label have a big size and dont whant to resize even inside a flex container. This solve it

input[type='text'],input[type='email'], input[type='password']{
  min-width:10%;
}

make the label a flex container

label{
  display:flex;
  align-items: flex-start;
  width:100%;
  wrap:nowrap;
}