Styling a label and textarea

by audetwebdesign

HTML

<h3>Example 1: Fixed width label and textarea</h3>
<div class="wrap ex1">
    <label for="qual">This is the format i want the text-area to be displayed:</label>
    <textarea id="qual" placeholder="Description and Qualification"></textarea>
</div>

<h3>Example 2: Flexible width elements</h3>
<div class="wrap ex2">
    <label for="qual">This is the format i want the text-area to be displayed:</label>
    <textarea id="qual" placeholder="Description and Qualification"></textarea>
</div>

CSS

.wrap {
    outline: 1px dotted blue;
    overflow: auto;
}

.wrap.ex1 label {
    outline: 1px dashed blue;
    float:left;
    width: 10em;
    margin-right: 1.00em;
}
.wrap.ex1 textarea {
    height: 8.0em;
    width: 32.0em;
    resize: none;
}

.wrap.ex2 label {
    outline: 1px dashed blue;
    float:left;
    width: 30%;
    margin-right: 2%;
}
.wrap.ex2 textarea {
    height: 8.0em;
    width: 65%;
    resize: none;
}