Inline form items

<!-- START form-item-text_field component -->
<div class="form-item form-item--text form-item--inline">
    <label for="text_field">Text field:</label>
    <input type="text" id="text_field" value="Example value"size="20" >
    <div class="form-item__description">Dolores consectetur quaerat laudantium sed qui fugiat repudiandae nisi voluptatem dicta molestiae et amet.</div>
</div>
<!-- END form-item-text_field component -->

<!-- START form-item-text_field_required component -->
<div class="form-item form-item--inline">
    <label for="text_field_required" class="form-item__required">Text field required:</label>
    <input type="text" id="text_field_required" value="Example value" required aria-required="true">
    <div class="form-item__description">Natus blanditiis exercitationem ut sunt</div>
</div>
<!-- END form-item-text_field_required component -->

<!-- START form-item-text_area component -->
<div class="form-item form-item--textarea form-item--inline">
    <label for="text_area">Text area:</label>
    <textarea id="text_area" rows="4" cols="40" >Example value</textarea>
</div>
<!-- END form-item-text_area component -->

<!-- START form-item-select component -->
<div class="form-item form-item--inline">
    <label for="select_element">Select element:</label>
    <select id="select_element">
        <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
    </select>
</div>
<!-- END form-item-select component -->

<!-- START search component -->
<div class="form-item form-item--inline">
  <label for="search_field">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Helpful placeholder text">
      <input type="submit" name="search_submit" value="Submit" title="Submit">
    </div>
</div>
<!-- END search component -->

<!-- START form-item-checkboxes_inline component -->
<div class="form-item form-item--inline">
    <fieldset class="form-item__radios form-item__radios--inline">
        <legend>Radio buttons (inline):</legend>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_1" value="radio_1" disabled="disabled" />
            <label for="rdi_1">Radio button 1 - disabled</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_2" value="radio_2" />
            <label for="rdi_2">Radio button 2</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_3" value="radio_3" />
            <label for="rdi_3">Radio button 3</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-checkboxes_inline component -->

<!-- START form-item-checkboxes_inline component -->
<div class="form-item form-item--inline">
    <fieldset class="form-item__checkboxes form-item__checkboxes--inline">
        <legend>Checkboxes (inline):</legend>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_1" value="checkbox_1" disabled="disabled" />
            <label for="chi_1">Checkbox button 1 - disabled</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_2" value="checkbox_2" />
            <label for="chi_2">Checkbox button 2</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_3" value="checkbox_3" />
            <label for="chi_3">Checkbox button 3</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_4" value="checkbox_4" checked="checked" disabled="disabled" />
            <label for="chi_1">Checkbox button 4 - disabled</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-checkboxes_inline component -->

<!-- START form-item__password component -->
<div class="form-item form-item--inline">
    <label for="password">Password:</label>
    <input type="password" class="form-item__password" name="password" id="password">
</div>
<!-- END form-item__password component -->

<!-- START form-item-text_field_with_button component -->
<div class="form-item form-item--inline">
  <label for="text_field">Text field:</label>
  <div class="input-with-actions">
    <input type="text" id="text_field" value="Example value">
      <div class="input-with-actions__actions">
        <button class="button button--small button--primary" type="button">Facilis sed</button>
      </div>
    </div>
  <div class="form-item__description">Debitis hic impedit reprehenderit sit voluptates aperiam totam vel quia autem aspernatur qui corrupti</div>
</div>
<!-- END form-item-text_field_with_button component -->