Align Text Vertically Next to a Select Drop-down (w/ Bootstrap)

I am having trouble getting some text to align vertically center. I have a left-aligned H4, and I have a right-aligned H4 next to a Select drop-down, all on the same line. The right section is working fine (the H4 aligns centered next to the Select drop-down), but the left section isn't.

Here is my code, followed by an image of what I have currently.

<div class="clearfix">
  <span class="d-flex align-items-center" style="float: left;">
    <h4 class="custom-header" style="float: left;">Standings</h4>
  </span>
  <span class="d-flex align-items-center" style="float: right;">
    <span style="float: left; height: 100%;">
      <h4 class="custom-header">Year:&nbsp;</h4>
    </span>
    <span style="float: right;">
      <!-- Allow user to change season -->
      <select class="form-control" id="seasonSelect" onchange="location = this.options[this.selectedIndex].value;">
        @foreach($seasons as $seasonRow)
          @if($seasonRow->id == $season->id)
            <option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/" selected>{{ $seasonRow->name }}</option>
          @else
            <option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/">{{ $seasonRow->name }}</option>
          @endif
        @endforeach
      </select>
    </span>
  </span>
</div>

Screenshot:

I was able to successfully align the "Year:" with the Select drop-down, but the same method does not seem to work to get the "Standings" to also vertically align. Its float-left DIV doesn't want to behave.