I have the following piece of code, which is part of a form:
<p>
<label>Mensaje:</label>
<textarea name="mensaje" rows="10" cols="70"></textarea>
</p>
The result of this is that the label
is located at the bottom of the textarea
. What can be done so that the label is located at the top?
You can do what you want using flexbox . Basically it is a way to arrange the elements unidimensionally, so for example, you can put the elements in a column or in a row, and order them in either of those two layouts. It would be something like this:
Having:
If you want it to
label
be above the text area, the styles would be:You could also achieve this simply by adding
display: block;
to the elementlabel
, so that it occupies all the horizontal space it has.On the contrary, if what you want is for the label to be to the right of the input, like it is now, but you want them to be vertically aligned:
Let me know if it worked for you and if that was what you were looking for.
If you want to put the
<label>
at the top you can use the css propertyvertical-align: top;
You would have something like this: