Long label breaks the design-CodePudding

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;
}