In form few fields have long labels, due to which my design breaks. plz guide
important points to be noted:-
- label should come in one line, or if its come in two other field should match the same.
- I don't want a label look like "sample label for re...."
CodePudding user response:
Just wrap all the labels in a single row. Then all the inputs in another row below. And set 25% width for the columns inside:
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.w-100prc {
width: 100%;
}
.w-25prc {
width: 25%;
}
<div >
<div >
<div >
LABEL 1
</div>
<div >
LABEL 2
</div>
<div >
LABEL 3
</div>
<div >
LABEL 4
</div>
</div>
<div >
<div >
INPUT 1
</div>
<div >
INPUT 2
</div>
<div >
INPUT 3
</div>
<div >
INPUT 4
</div>
</div>
</div>
CodePudding user response:
Could you try this in your CSS?
.row label {
white-space: nowrap;
}