Toolbar

<div class="pf-c-data-toolbar rhd-c-toolbar" id="data-toolbar-stacked-example">
  <div class="pf-c-data-toolbar__content">
    <div class="pf-c-data-toolbar__content-section">
      <div class="pf-c-data-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
        <div class="pf-c-data-toolbar__toggle">
          <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="false" aria-controls="data-toolbar-stacked-example-expandable-content">
            <i class="fas fa-filter" aria-hidden="true"></i>
          </button>
        </div>
        <div class="pf-c-data-toolbar__group">
          <div class="pf-c-data-toolbar__item pf-m-label" id="filter-by-label" aria-hidden="true">Filter by</div>
          <div class="pf-c-data-toolbar__item">
            <div class="pf-c-select">
              <button class="pf-c-select__toggle pf-m-plain" type="button" id="filter-by-select" aria-haspopup="true" aria-expanded="false" aria-labelledby="filter-by-label filter-by-toggle">
                <div class="pf-c-select__toggle-wrapper">
                  <span class="pf-c-select__toggle-text">All DevNation</span>
                </div>
                <i class="fas fa-caret-down pf-c-select__toggle-arrow" aria-hidden="true"></i>
              </button>
              <div class="pf-c-select__menu" hidden aria-labelledby="filter-by-toggle">
                <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input">
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-resource-active">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-resource-active" name="-select-checkbox-resource-active" />
                    <span class="pf-c-check__label">Active</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-resource-cancelled">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-resource-cancelled" name="-select-checkbox-resource-cancelled" />
                    <span class="pf-c-check__label">Cancelled</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-resource-paused">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-resource-paused" name="-select-checkbox-resource-paused" />
                    <span class="pf-c-check__label">Paused</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-resource-warning">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-resource-warning" name="-select-checkbox-resource-warning" />
                    <span class="pf-c-check__label">Warning</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-resource-restarted">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-resource-restarted" name="-select-checkbox-resource-restarted" />
                    <span class="pf-c-check__label">Restarted</span>
                  </label>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div class="pf-c-data-toolbar__group">
          <div class="pf-c-data-toolbar__item">
            <div class="pf-c-select">
              <button class="pf-c-select__toggle pf-m-plain" type="button" id="-select-checkbox-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle">
                <div class="pf-c-select__toggle-wrapper">
                  <span class="pf-c-select__toggle-text">English</span>
                </div>
                <i class="fas fa-caret-down pf-c-select__toggle-arrow" aria-hidden="true"></i>
              </button>
              <div class="pf-c-select__menu">
                <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input">
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-status-active">
                    <span class="pf-c-check__label">Portuguese</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-status-cancelled">
                    <span class="pf-c-check__label">Français</span>
                  </label>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div class="pf-c-data-toolbar__group">
          <div class="pf-c-data-toolbar__item pf-m-label" id="sort-by-label" aria-hidden="true">Sort by</div>
          <div class="pf-c-data-toolbar__item">
            <div class="pf-c-select">
              <button class="pf-c-select__toggle pf-m-plain" type="button" id="sort-by-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="sort-by-label sort-by-toggle">
                <div class="pf-c-select__toggle-wrapper">
                  <span class="pf-c-select__toggle-text">Recent</span>
                </div>
                <i class="fas fa-caret-down pf-c-select__toggle-arrow" aria-hidden="true"></i>
              </button>
              <div class="pf-c-select__menu" hidden>
                <fieldset class="pf-c-select__menu-fieldset" aria-label="Select input">
                  <label class="pf-c-check pf-c-select__menu-item" for="sort-by-label-active">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="sort-by-label-active" name="sort-by-label-active" />
                    <span class="pf-c-check__label">Active</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="sort-by-label-cancelled">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-type-cancelled" name="sort-by-label-cancelled" />
                    <span class="pf-c-check__label">Cancelled</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="sort-by-label-paused">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-type-paused" name="sort-by-label-paused" />
                    <span class="pf-c-check__label">Paused</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-type-warning">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-type-warning" name="-select-checkbox-type-warning" />
                    <span class="pf-c-check__label">Warning</span>
                  </label>
                  <label class="pf-c-check pf-c-select__menu-item" for="-select-checkbox-type-restarted">
                    <input class="pf-c-check__input" type="checkbox" type="checkbox" id="-select-checkbox-type-restarted" name="-select-checkbox-type-restarted" />
                    <span class="pf-c-check__label">Restarted</span>
                  </label>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>