Textboxes Being Treated As Elements By Css Are Not Aligning With Corresponding Text

I'm trying to create three textboxes in a row, but the text that should be adjacent (to the left) to the text boxes is being pushed down so that it is to the left (but below) the t

Solution 1:

Add vertical-align: top; to your td styles (and add class="table" to your fieldset).

fieldset {
  display: block;
  /*margin: 0 auto;*//*text-align: center;*//*margin-left: 2px;*//*margin-right: 2px;*/padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove;
}


/*the .table class id was originally provided by stackoverflow, however, when using it on the fieldset
    it causes everything to be aligned to the left.
    */.table {
  display: table;
  /*text-align: center;*//*margin: 0 auto;*/
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  text-align: left;
  vertical-align: top;
}

.td.right {
  text-align: right;
}

<fieldsetclass="table"><divclass="tr"><divclass="td right">Scars, Marks, Tattoos (Describe):</div><divclass="td"><textareaname="susScarsEtc"rows="5"cols="20">Nothing notable.</textarea></div><divclass="td right">General Appearance (Describe):</div><divclass="td"><textareaname="susGenAppear"rows="5"cols="20">Nothing notable.</textarea></div><divclass="td right">Distinguishing Handicap(s) (Describe):</div><divclass="td"><textareaname="susHandicap"rows="5"cols="20">Nothing notable.</textarea></div></div></fieldset>