Filter box component

<section class="c-filter-box o-grid">
    <p class="c-filter-box__description o-grid__span-col--8@medium">Please specify the required date range wanted, optionally you can also enter the attributes in the fields you need to filter to show up on your report.</p>
    <div class="o-grid__span-col--4@medium o-grid o-grid--auto--sm">
        <div class="o-stack--xs">
            <label for="start-date" class="o-label">Start date</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="start-date" placeholder="April 15, 2019" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="end-date" class="o-label">End date</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="end-date" placeholder="May 15, 2019" value="">
            <!-- Input ends -->
        </div>
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="company" class="o-label">Company</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="company" placeholder="Type company name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="facility" class="o-label">Facility</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="facility" placeholder="Type facility name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="well" class="o-label">Well</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="well" placeholder="Type well name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="product" class="o-label">Product</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="product" placeholder="Tubing, Rod, Coupling" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="rack" class="o-label">Rack</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="rack" placeholder="Type rack number" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="size" class="o-label">Size</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="size" placeholder="2-3/8”, 2-7/8”, 3/4”, 7/8”" value="">
        <!-- Input ends -->
    </div>
    <div class="u-d-flex">
        <button class="c-btn c-btn--primary c-btn--xs u-mr-auto">Update Filters</button>
        <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-ml-auto u-p-0 u-text-right js-extra-filters">Show more item filters</button>
    </div>
    <section class="o-grid o-grid--auto--lg o-grid--fix--4@large c-filter-box__extra-filters">
        <div class="o-stack--xs">
            <label for="grade" class="o-label">Grade</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="grade" placeholder="J-55, L-80, D, KD, HS" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="APIgrade" class="o-label">API Grade</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="APIgrade" placeholder="Type API Grade" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="coating" class="o-label">Coating</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="coating" placeholder="Type coating" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="mill" class="o-label">Mill</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="mill" placeholder="Type mill" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="range" class="o-label">Range</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="range" placeholder="Type Range" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="seam" class="o-label">Seam</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="seam" placeholder="Type seam" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="connection" class="o-label">Connection</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="connection" placeholder="Type connection" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="couplingMft" class="o-label">Coupling manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="couplingMft" placeholder="Type coupling manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideMft" class="o-label">Guide manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideMft" placeholder="Type guide manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="rodMft" class="o-label">Rod manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="rodMft" placeholder="Type rod manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="thread" class="o-label">Thread</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="thread" placeholder="Type thread" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guide" class="o-label">Guide</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guide" placeholder="Type guide" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guidePer" class="o-label">Guide Per</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guidePer" placeholder="Type guide per" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guidePolymer" class="o-label">Guide polymer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guidePolymer" placeholder="Type guide polymer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideSize" class="o-label">Guide size</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideSize" placeholder="Type guide size" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideType" class="o-label">Guide type</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideType" placeholder="Type guide type" value="">
            <!-- Input ends -->
        </div>
    </section>
</section>