My goal is to create an input field with a right-aligned label in Semantic UI. The documentation provides an example of a cornered label that functions correctly, but when attempting to use a regular label, the layout of the input field gets disrupted.
To illustrate my issue, I have created a fiddle (http://jsfiddle.net/26fqd39d/).
The code below, extracted from the documentation, demonstrates a successful implementation with a label positioned on the right side within the input field:
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui corner label"><i class="copy icon"></i></div>
</div>
In my scenario, using a cornered label doesn't suffice as I would like to incorporate units like km and mi into the label, which require more space.
When switching to a regular label, as shown below, the label moves to a new line disrupting the layout:
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui label"><i class="copy icon"></i></div>
</div>
As evident in the fiddle, the label breaks onto a separate line. I seek guidance on how to construct an input field with a right-aligned label using Semantic UI. Understanding the reason behind this issue will greatly aid me in creating layouts with Semantic UI.
Thank you.