I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following:
Label 1 Label 2
Value 1 Value 2
Here is the code I have so far - plnkr
<div>
<span>
<span class="a">title 1</span>
<input type="text" class="b" />
</span>
<span>
<span class="c">title 2</span>
<input class="d" />
</span>
</div>
CSS:
span.a {
color: red;
}
input.b {
display: block;
}
span.c {
color: blue;
}
input.d {
display: block;
}
What would be the best approach to resolve this design issue?