I have a parent div, containing 3 children, i want to show them beside each other, except for the last div to be in a new line but to the right, under the div
, how can this be done?
.form-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.form-row .form-label {
width: 35%;
}
.form-row .form-field {
width: 65%;
}
<div >
<label >Your message</label>
<div >
<textarea name="message"></textarea>
</div>
<div >
<p>You can write your message here</p>
</div>
</div>
CodePudding user response:
Use same with for .form-field
and .form-message
and justify-content: flex-end;
for .form-row
.form-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
.form-label {
width: 35%;
}
.form-field, .form-message {
width: 65%;
}
<div >
<label >Your message</label>
<div >
<textarea name="message"></textarea>
</div>
<div >
<p>You can write your message here</p>
</div>
</div>