There is a CSS placeholder option that can be used to raise a label and have it hover above an input. A good example is here: Move label in placeholder CSS
Where I copied this code snippet and made the label longer.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<label>A long line of really descriptive label goes here - **note: if this, then that, otherwise enter something else below, failing that, do something else again. thank you.</label>
<div class="control">
<input type="text" class="input-text">
</div>
</div>
The challenge is that when the label is really long, and wraps to the next line, the placeholder label covers the element below it.
Would there be a solution to 'padding-top' the input for the height of the label (but only if the label wraps to the next line?)
or alternatively, a solution where the bottom of the label could be relative to the input, instead of the top of the label?