How can I create a horizontal form in Semantic UI? - semantic-ui

Question

I see there are horizontal examples in Bootstrap (form-horizontal), but Semantic UI only seems to have form layouts where the label is above the input.

Answer 1

In the docs section, You can find Semantic UI form inline and Grouped fields which is similar to form-horizontal of Twitter Bootstrap.
To create a new row of fields inside the form, wrap the elements inside <div class="inline field"> </div>
/* Code added for presentation in SO snippet, ignore this CSS */
* > div,
h1 {
margin-left: 20px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<h1>Single</h1>
<div class="ui form">
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
</div>
<h1>Grouped</h1>
<div class="ui form">
<div class="inline fields ui grid container centered">
<label class="four wide column">Lengthy Phone numbers</label>
<div class="field four wide column">
<input type="text" placeholder="(xxx)">
</div>
<div class="four wide column field">
<input type="text" placeholder="xxx">
</div>
</div>
<div class="inline fields ui grid container centered">
<label class="four wide column">Phone Number</label>
<div class="four wide column field">
<input type="text" placeholder="(xxx)">
</div>
<div class="field four wide column">
<input type="text" placeholder="xxx">
</div>
</div>
</div>

Answer 2

The first part of the solution, i.e. class="inline field" does not work if the labels have different width, also the labels are not right-aligned as in the bootstrap example. One could solve this like this
<div class="inline field">
<label style="width:30%; text-align:right;">Last name</label>
<input placeholder="Full Name" type="text">
</div>
But that's ugly.