Select Dropdowns

<div class="o-stack o-stack--align-center o-stack--8">
  <!-- Small -->
  <div
    class="c-select c-select--icon-right c-select--icon c-select--small"
  >
    <select class="c-select__input">
      <option>Small</option>
    </select>
    <div class="c-select__icon c-icon">
      <!-- SVG element -->
    </div>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Medium -->
  <div
    class="c-select c-select--icon-right c-select--icon c-select--medium"
  >
    <select class="c-select__input">
      <option>Medium</option>
    </select>
    <div class="c-select__icon c-icon">
      <!-- SVG element -->
    </div>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Default -->
  <div class="c-select c-select--icon-right c-select--icon">
    <select class="c-select__input">
      <option>Default</option>
    </select>
    <div class="c-select__icon c-icon">
      <!-- SVG element -->
    </div>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Large -->
  <div
    class="c-select c-select--icon-right c-select--icon c-select--large"
  >
    <select class="c-select__input">
      <option>Large</option>
    </select>
    <div class="c-select__icon c-icon">
      <!-- SVG element -->
    </div>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
</div>

<div class="o-stack o-stack--align-center o-stack--8">
  <!-- Tiny -->
  <div
    class="c-select c-select--icon-right c-select--width-tiny"
  >
    <select class="c-select__input">
      <option>Tiny</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Extra small -->
  <div
    class="c-select c-select--icon-right c-select--width-extra-small"
  >
    <select class="c-select__input">
      <option>Extra small</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Small -->
  <div
    class="c-select c-select--icon-right c-select--width-small"
  >
    <select class="c-select__input">
      <option>Small</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Medium -->
  <div
    class="c-select c-select--icon-right c-select--width-medium"
  >
    <select class="c-select__input">
      <option>Medium</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Default -->
  <div
    class="c-select c-select--icon-right c-select--width-normal"
  >
    <select class="c-select__input">
      <option>Normal</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Large -->
  <div
    class="c-select c-select--icon-right c-select--width-large"
  >
    <select class="c-select__input">
      <option>Large</option>
    </select>
    <div
      class="c-select__icon c-select__icon--right c-icon"
    >
      <!-- SVG element -->
    </div>
  </div>
  <!-- Fill -->
  <div class="o-stack__item o-stack__item--flexible">
    <div
      class="c-select c-select--icon-right c-select--width-fill"
    >
      <select class="c-select__input">
        <option>Fill</option>
      </select>
      <div
        class="c-select__icon c-select__icon--right c-icon"
      >
        <!-- SVG element -->
      </div>
    </div>
  </div>
</div>

<div
  class="o-stack o-stack--vertical o-stack--8 o-stack--align-start"
>
  <div class="c-field-group c-field-group--merged">
    <button class="c-button c-button--icon-only">
      <span class="c-button__icon c-icon c-icon--small">
        <!-- SVG element -->
      </span>
    </button>
    <div
      class="c-textfield c-textfield--icon c-textfield--width-normal"
    >
      <input
        class="c-textfield__input"
        type="text"
        value="Text input"
      />
      <div class="c-textfield__icon c-icon">
        <!-- SVG element -->
      </div>
    </div>
    <div
      class="c-select c-select--icon-right c-select--width-medium"
    >
      <select class="c-select__input">
        <option>Dropdown</option>
      </select>
      <div
        class="c-select__icon c-select__icon--right c-icon"
      >
        <!-- SVG element -->
      </div>
    </div>
    <button class="c-button c-button--icon-only">
      <span class="c-button__icon c-icon c-icon--small">
        <!-- SVG element -->
      </span>
    </button>
    <div class="c-field-addon">Suffix</div>
  </div>
</div>