I am having an issue with an asp control that renders as a text area. I have applied some CSS to style it, but I am facing a problem where a long label is overlapping the textbox. Is there any CSS I can add to push the textbox down if the label gets too long? In my form, I have set the width to 50%, which causes the text to go onto 2 lines and then overlap.
*,
*:before,
*:after {
box-sizing: border-box;
}
#formQuestions {
width: 500px;
margin: 2em auto;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 25px;
}
.float-label .control {
float: left;
position: relative;
width: 100%;
border-bottom: 1px solid #ddd;
padding-top: 23px;
padding-bottom: 10px;
}
.float-label .control.small {
width: 30%;
border-right: 1px solid #ddd;
}
.float-label .control.medium {
width: 70%;
padding-left: 10px;
}
.float-label .control:last-child {
border: 0;
}
.float-label input,
.float-label textarea {
display: block;
width: 100%;
border: 0;
outline: 0;
overflow-y: hidden;
border: none;
border-left: 1px solid rgb(204, 204, 204);
border-right: 1px solid rgb(204, 204, 204);
border-bottom: 1px solid rgb(204, 204, 204);
overflow: auto;
}
.float-label input+label,
.float-label textarea+label {
position: absolute;
top: 10px;
transition: top 0.7s ease, opacity 0.7s ease;
opacity: 0;
font-size: 18px;
font-weight: 600;
color: #ccc;
}
.float-label input:valid+label,
.float-label textarea:valid+label {
opacity: 1;
top: 3px;
}
.float-label input:focus+label,
.float-label textarea:focus+label {
color: #2c8efe;
}
<div id="formQuestion" class="float-label" spellcheck="false">
<div class="divJobDescription">
<h3><b>Job Description</b></h3>
<div class="control">
<textarea name="ctl00$ContentPlaceHolder1$Details1$ProjectReviewForm1$txtDeliverables$TextBox1" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" title="Please provide a meaningful description for your project, this will be used in bids" style="width: 80%;">
Data pulled from job search</textarea>
<label for="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_Label1">Please provide a meaningful description for your project, this will be used in bids</label>
</div>
</div>