Stretching input text field

HTML-CSS
1

Hi guys! I have almost completed Survey project and I would like to improve some details there.
My Survey Form Project

There are input text field and its label in a single row. For example:
Your name: _______________________________________
Your email: _______________________________________
Your number (between 1 and 5): ________________

I want to keep size of a label (size of a label should depend of amount of label text) and for the rest of a row I would like to stretch a input field over it.
I would like to hear your suggestions.
Thanks in advance!

2

Maybe you can refer this,

2 Likes
3

Thanks, but I didn’t mean that.
I mean, label text starts at the left, and after label sentence ends, the rest of a row should be input field stretched over.

4

So, based on what you said,

You can make the label as 30% width and then give a 70% width to your input field

Note: It may affect the radio inputs, so you have to wrap it in a container and give the container a 70% width

1 Like
5

Yes, but I want to avoid fixed widths.
I want that label width define input text width (I will not use this for radio or such)
So if the amount of text uses 56% of a row, then the rest of a row (44%) should be input text field stretched.
Also I don’t want my label field width be fixed. I want it be flexible whatever I type for label text.
For example:
1)
blablabla:_________________________
Input Name:______________________
blablablablablabla:_______________

  1. (label text edited)
    blablabla:_________________________
    Input Your Name:________________
    blablablablablabla:_______________
6

Okay, it’s not possible to do that, because input fields has a default width, if you want to occupy the entire space leftover, then you should use percentage ( for responsiveness ), if you don’t define any width to the input, it will stay as you wish, but doesn’t occupy the entire space it leaves to the right side of it.

If you don’t need percent, use flexbox, wrap the input and label with a div and give it a display flex, to the label give flex: 1 and to the input field give flex: 3

What it means that, take 1 instance of the width to label and give the input filed 3 times the width of label

1 Like