Semantic interface: right aligned / floating button

Question

How to properly align a button using the Semantic-UI on the right? I 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 under the input field. Could you explain (in addition to the right decision) why this is happening? Do I need to use a grid?

Second question:

Two tagged inputs, e.g.

            <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 a gray label nor a complete input field. Is this consistent?

jsfiddle test

Thanks in advance!:)

Answer 1

Elements inline-flex( inline-block), so you need to break the lines manually using <br />.

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