How to Align a Label and a Textarea

How do I align a label and a textarea?

You need to put them both in some container element and then apply the alignment via the container element.

For example:

.formfield {
  display: flex;
  align-items: center;
}

<div class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</div>

How will I align the label of a text area to top?

With the following CSS:

textarea { vertical-align: top; }

jsFiddle Demo
vertical-align on MDN:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element.
What is Vertical Align? on CSS-Tricks

align labels with textarea

Addign vertical-align: top to b tag should do it.

And textareas arent self closing, added </textarea>

    b {        display: inline-block;        width: 15%;        vertical-align: top;    }
    .upper-case {        text-transform: uppercase;    }
    .txtbox {        width: 300px;    }
    .txtarea {        width: 600px;    }
    .div_labels {        text-align: left;        width: 100%;        font-size: 13px;        margin-bottom: 5px;    }        b {          }

<div class="div_labels"><b>Medical History :</b><textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY"></textarea></div><div class="div_labels"><b>Diagnosis :</b><textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" ></textarea></div><div class="div_labels"></div><div class="div_labels"><b>ICD :</b><input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/></div>

Align label next to textarea field, centered? pure css solution

You have to set the vertical-align: middle property for the textarea (or for any element for which you want to specify a label - e.g. works for multiple select as well).

Working fiddle here

Align inputs and textarea with labels vertically even

I would not use a flexbox for the form, but for each <div> inside the form. The labels are vertically centered for each input field, except for the textarea. There the label is vertically aligned at the top. You can play with top padding there when desired.

* {  box-sizing: border-box;}
.contact__right {  background-color: gray;}
.contact__form {  padding: 105px 95px;  width: 100%;  color: white;}
.contact__form>div {  display: flex;  align-items: center;  justify-content: space-between;  margin-bottom: 25px;}
.contact__form-input,.contact__form-textarea {  width: 300px;  height: 40px;  background: transparent;  border: 1px solid white;  border-radius: 2px;}
.contact__form-textarea {  height: 150px;}
label[for="message"].contact__form-label {  align-self: flex-start;}

<div class="contact__right">  <form action="" class="contact__form">    <div>      <label for="name" class="contact__form-label">Name</label>      <input type="text" id="name" class="contact__form-input">    </div>    <div>      <label for="email" class="contact__form-label">Email</label>      <input type="text" id="email" class="contact__form-input">    </div>    <div>      <label for="phone" class="contact__form-label">Phone</label>      <input type="text" id="phone" class="contact__form-input">    </div>    <div>      <label for="message" class="contact__form-label">Message</label>      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>    </div>  </form></div>

How to align Label of text area to top and right?

Use vertical-align:top;, not vertical- align:text-top;. This will make sure that your text is not aligned to the bottom, like it currently is.

.labelcss{  width: 180px;   display: inline-block;  text-align:right;  vertical-align: top;}

<label class="labelcss" for="address">Address: </label><textarea name="address" id="address">

How to Align Label of the text area in center with respect to that textarea?

An always simple way is to make the div

[appropriate css selector for div containing "Data Definition"] {
  display: flex;
  align-items: center;
  /* if you want to horizontally center as well, then: */
  justify-content: center;
}

to vertically center them.

.title {
  width: 200px;
  height: 200px;

  text-align: center;
  background-color: #3abaab;
  font-size: large;
  vertical-align: middle;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="title">
  Data Definition
</div>

Positioning textarea label above (with or without table)

Get rid of position: absolute, I don't see a point of using it inside table in this case.

<div id="ContactUsForm">
    <p>Contact Us</p>
        <form>
            <table>
            <tr>
            <td>
            <label for="message">your message:</label>
            <textarea id="message" class="contact" name="message"></textarea>
            <label for="email">your email:</label>
            <textarea id="email" class="contact" name="email"></textarea>
            </td>
            </tr>
            </table>
        </form>
</div>

    #ContactUsForm {
    width: 1400px;
    height: 400px;
    border: 2px solid #E64A19;
}

#ContactUsForm p {
    text-decoration: underline;
    font-weight: bold;
    font-size: 30px;
}

.contact {
    background: white;
    border: 2px solid #E64A19;
}

#message {
    width: 500px;
    height: 150px;
    top: 100px;
    left: 30px;
    resize: none;
    display: block;
}

#email {
    width: 500px;
    height: 70px;
    display: block;
    resize: none;
    top: 300px;
    left: 30px;
}

label {
    vertical-align: top;
}

Here's JSFiddle: https://jsfiddle.net/pa4r62eu/