I am attempting to achieve a specific layout for various media types, as shown below.
On smaller screens:
+----------------------+
| LABEL |
+----------------------+
| TEXT INPUT |
+----------------------+
On medium and larger screens:
+----------------------+----------------------+
| LABEL | TEXT INPUT |
+----------------------+----------------------+
Currently, my code looks like this:
<div class="row">
<div class="columns medium-2">
<label>
Label
</label>
</div>
<div class="columns medium-10">
<input type="text" />
</div>
</div>
However, on medium and larger screens, the label is not vertically aligned in the middle or horizontally aligned to the right. Foundation 5 provides special classes label.inline and label.right, but I prefer not to use these on smaller screens.
An option I am aware of involves using two labels - one visible only on small screens and the other visible on medium and larger screens with additional classes:
<label class="visible-for-small-only">
Label
</label>
<label class="visible-for-medium-up right inline">
Label
</label>
Is there a CSS-only solution that allows me to utilize Foundation classes inline and right while avoiding the need for two separate labels?