how to create a horizontal grouped input with .pure-group in purecss? - yui-pure-css

Question

from http://purecss.io/forms/ on the section "Grouped Inputs" it only shows a vertical/stacked grouped inputs, but is it possible to make a horizontal one?

Answer 1

You could use the multi-column form example but set the class of the input fields to pure-u-1 like this:
<form class="pure-form pure-form-stacked">
<fieldset>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<input id="Username" class="pure-u-1" type="text" placeholder="Username">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<input id="Password" class="pure-u-1" type="text" placeholder="password">
</div>
<div class="pure-u-1 pure-u-md-1-3">
<input id="email" class="pure-u-1" type="email" required placeholder="email">
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox">I've read the terms and conditions</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
JSFiddle

Answer 2

Sure, just extend it. Here's something I whipped up quickly for my own purposes - may need to expand on it for other elements:
.pure-form {
.pure-horizontal-group {
input:first-child, textarea:first-child {
border-radius: 4px 0 0 4px;
margin: 0 0 0 -2px;
}
input, textarea {
display: inline-block;
padding: 10px;
margin: 0 -2px 0 0;
border-radius: 0;
position: relative;
}
input:last-child, textarea:last-child {
border-radius: 0 4px 4px 0;
margin: 0 0 0 -2px;
}
}
}