기본 폼 요소들은 넓이 값은 100% 이며 각 요소들 간에 최적의 여백을 위해 .xe-form-group로 그룹핑 합니다.

<div class="xe-form-group">
    <div class="xe-select-box xe-btn">
        <label>xe-select-box 1</label>
        <select>
        <option>xe-select-box 1</option>
        <option>xe-select-box 2</option>
        <option>xe-select-box 3</option>
        <option>xe-select-box 4</option>
        </select>
    </div>
</div>
<div class="xe-form-group">
    <input type="text" class="xe-form-control" id="xe-name" value="xe-form-control">
</div>
<label class="xe-label">
    <input type="checkbox">
    <span class="xe-input-helper"></span>
    <span class="xe-label-text">체크박스</span>
</label>
<button class="xe-btn xe-btn-primary">확인</button>

부모 구조에 .xe-form-inline 클래스를 추가하면 inline 스타일로 변경됩니다.

<div class="xe-form-inline">
    <div class="xe-form-group">
        <div class="xe-select-box xe-btn">
            <label>xe-select-box 1</label>
            <select>
            <option>xe-select-box 1</option>
            <option>xe-select-box 2</option>
            <option>xe-select-box 3</option>
            <option>xe-select-box 4</option>
            </select>
        </div>
    </div>
    <div class="xe-form-group">
        <input type="text" class="xe-form-control" id="xe-name" value="xe-form-control">
    </div>
    <label class="xe-label">
        <input type="checkbox">
        <span class="xe-input-helper"></span>
        <span class="xe-label-text">체크박스</span>
    </label>
    <button class="xe-btn xe-btn-primary">확인</button>
</div>

부모에 .xe-input-group 클래스를 추가하면 그룹핑된 스타일로 변경됩니다.

<div class="xe-form-inline">
    <div class="xe-input-group">
        <span class="xe-input-group-btn">
            <button class="xe-btn xe-btn-primary" type="button">xe-btn</button>
        </span>
        <input type="text" class="xe-form-control" placeholder="xe-form-control">
    </div>
    <div class="xe-input-group">
        <input type="text" class="xe-form-control" placeholder="xe-form-control">
        <span class="xe-input-group-btn">
            <button class="xe-btn xe-btn-primary" type="button">xe-btn</button>
        </span>
    </div>
</div>