Semantic UI: right aligned/floated button

问题

How do I align a button correctly using Semantic-UI at the right? I've tried things like:

            <div class="ui mini labeled input">
                <div class="ui label">Description</div>
                <input placeholder="Privat" type="text">
            </div>
            <div class="ui floated right red mini button">
                Remove
            </div>
            <br />

But the button is always below the input field. Could you explain (in addition to the correct solution) why this happens? Do I have to use a grid?

Second question beside this:

Two labeled inputs like

            <div class="ui mini labeled input">
                <div class="ui label">description</div>
                <input placeholder="Privat" type="text">
            </div><br/>
            <div class="ui mini labeled input">
                <div class="ui label">another description</div>
                <input placeholder="Privat" type="text">
            </div>

Do not have the same length. Neither the gray label nor the total input field. Is this alignable?

jsfiddle test

Thanks in advance! :)

回答1:

The elements are inline-flex (inline-block), that's why you have to break the lines manually using <br />.

See: https://jsfiddle.net/4p6d7x86/2/

来源：https://stackoverflow.com/questions/29195523/semantic-ui-right-aligned-floated-button