Let me illustrate the issue I am encountering:
https://jsfiddle.net/v10un11s/1/
Here is the snippet of my HTML code:
<div>
<div class="component">
<div>
<label for="test1" id="short-label">Short label: </label>
</div>
<div>
<input type="text" id="test1" />
</div>
</div>
<div class="component">
<div>
<label for="test2" id="long-label">This is my very lengthy label: </label>
</div>
<div>
<input type="text" id="test2" />
</div>
</div>
</div>
Here is my CSS snippet: .
component > div:first-child {
width: 150px;
text-align: right;
margin-right: 5px;
margin-bottom: 10px;
}
.component > div {
display: inline-block;
}
While the current layout aligns the input field to the right of the labels, it does so at the end of the line for a lengthy label. What I aim for is to align the input field to the right and relative middle of the label.
My desired outcome is to have the input field aligned with the third line of the long label in the JS Fiddle example above.
Despite numerous attempts to adjust margins, paddings, and line-height, the ideal solution still eludes me.