Options bar

<!-- START options-bar component -->
<section>
  <div class="options-bar-container">
    <div class="wrapper wrapper--padding">

      <div class="options-bar-header">
        <div class="heading-with-meta">
          <h2><span class="heading-alternative">Course</span> options</h2>
          <div class="heading-with-meta__meta">
            <form>
              <div class="l-form-item-container">
                <div class="v5-form-item v5-form-pair" data-form-item-modal="CourseOptionsModal">
                  <label for="CourseOptionsSelect" class="v5-form-item__label hide-element">Course options</label>
                  <select id="CourseOptionsSelect">
                    <option selected="selected" value="0">
                      Option one
                    </option>
                    <option value="1">
                      Option two
                    </option>
                    <option value="2">
                      Option three with a really long title for testing purposes
                    </option>
                  </select>
                  <button id="CourseOptionsSubmit" class="button" type="submit" data-form-item-modal-label="4 course options available">Submit</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <form class="options-bar" id="options-bar-form">

        <div class="options-bar__items">

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--calendar-multiple-light">
              <label for="AcademicYear" class="v5-form-item__label">Academic year</label>
              <select id="AcademicYear">
                <option selected="selected" value="0">
                  2018 entry
                </option>
                <option value="1">
                  2019 entry
                </option>
                <option value="2">
                  Stupidly long option for testing purposes
                </option>
              </select>
            </div>
          </div>

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--qualification-type-light">
              <label for="QualificationType" class="v5-form-item__label" data-options-bar-item-value="Bachelor of Science (with Honours)">Qualification type</label>
              <input type="text" id="QualificationType" value="Bachelor of Science (with Honours)" disabled>
            </div>
          </div>

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--map-marker-light">
              <label for="Location" class="v5-form-item__label" data-options-bar-item-value="BIMM Brighton">Location</label>
              <input type="text" id="Location" value="BIMM Brighton" disabled>
            </div>
          </div>

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--calendar-light">
              <label for="StartDate" class="v5-form-item__label" data-options-bar-item-value="October 2019">Start date</label>
              <input type="text" id="StartDate" value="October 2019" disabled>
            </div>
          </div>

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--study-mode-light">
              <label for="StudyMode" class="v5-form-item__label" data-options-bar-item-value="Part-time">Study mode</label>
              <input type="text" id="StudyMode" value="Part-time" disabled>
            </div>
          </div>

          <div class="l-form-item-container options-bar__item">
            <div class="v5-form-item v5-form-item--chic icon-inline--left icon-inline--larger icon--duration-light">
              <label for="Duration" class="v5-form-item__label" data-options-bar-item-value="1 year">Duration</label>
              <input type="text" id="Duration" value="1 year" disabled>
            </div>
          </div>

        </div>

        <div class="l-form-item-container options-bar__submit">
          <button id="options-bar-apply-button" class="button button--primary" type="submit" form="options-bar-form">Apply</button>
        </div>

      </form>
    </div>
  </div>
</section>
<!-- END options-bar component -->