<form class="coop-c-search coop-form">
    <label for="search-large" class="coop-u-visuallyhidden">Search [website name]</label>
    <input type="search" name="search" id="search-large" placeholder="Search [website name]" class="coop-form__input coop-c-search__input">
    <button class="coop-c-search__button coop-btn">
        <span class="coop-u-visuallyhidden">Search</span>
        <svg width="32" height="32" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C13 2.9 10.1 0 6.5 0S0 2.9 0 6.5 2.9 13 6.5 13c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C4 11 2 9 2 6.5S4 2 6.5 2 11 4 11 6.5 9 11 6.5 11z" fill="#FFFFFF" fill-rule="evenodd"/></svg>
    </button>
</form>

<form class="coop-c-search">
    <label for="search-small" class="coop-u-visuallyhidden">Search [website name]</label>
    <input type="search" name="search" id="search-small" placeholder="Search [website name]" class="coop-form__input coop-c-search__input coop-c-search__input--small">
    <button class="coop-c-search__button coop-c-search__button--small coop-btn">
        <span class="coop-u-visuallyhidden">Search</span>
        <svg width="32" height="32" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C13 2.9 10.1 0 6.5 0S0 2.9 0 6.5 2.9 13 6.5 13c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C4 11 2 9 2 6.5S4 2 6.5 2 11 4 11 6.5 9 11 6.5 11z" fill="#FFFFFF" fill-rule="evenodd"/></svg>
    </button>
</form>