Семантический интерфейс: правая выровненная/плавающая кнопка

Question

Как правильно выровнять кнопку с помощью семантического интерфейса справа? Я пробовал такие вещи, как:

  <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 /> 

Но кнопка всегда находится под полем ввода. Не могли бы вы объяснить (в дополнение к правильному решению), почему это происходит? Нужно ли использовать сетку?

Второй вопрос, кроме этого:

Два маркированных входы, как

  <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> 

Не имеет одинаковую длину. Ни серая метка, ни полное поле ввода. Согласуется ли это?

jsfiddle тест

Заранее спасибо! :)

Answer 1

Элементы inline-flex (inline-block), поэтому вам необходимо разбить линии вручную, используя <br />.

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