Width on Horizontal Form

[Cordsplitter]

Hi,

I have a horizontal form where the input field of the datepicker is not as wide as other fields. I've tried finding whether there is any CSS that can overwrite this but have been unsuccessful so far.

The first row of fields:

        <div class="field is-horizontal">
          <div class="field-body">
            <div class="field">
              <label class="label">Name</label>
              <p class="control is-expanded has-icons-left">
                <input class="input" type="text" placeholder="Joe Bloggs">
                <span class="icon is-small is-left">
                  <i class="fas fa-user"></i>
                </span>
              </p>
            </div>
            <div class="field">
              <label class="label">Date</label>
              <p class="control has-icons-left">
                <input class="input" id="date" type="date">
                <span class="icon is-small is-left">
                  <i class="fas fa-calendar-alt"></i>
                </span>
              </p>
            </div>
          </div>
        </div>

Second row of fields:

        <div class="field is-horizontal">
          <div class="field-body">
            <div class="field">
              <label class="label">Department</label>
              <p class="control has-icons-left is-expanded">
                <span class="select is-fullwidth">
                  <select>
                    <option selected>Transfers</option>
                    <option>Bereavements</option>
                    <option>Police & Fire</option>
                  </select>
                </span>
                <span class="icon is-small is-left">
                  <i class="fas fa-building"></i>
                </span>
              </p>
            </div>
            <div class="field">
              <label class="label">Line Manager</label>
              <div class="control has-icons-left">
                <input class="input" type="text" placeholder="John Smith">
                <span class="icon is-small is-left">
                  <i class="fas fa-user-tie"></i>
                </span>
              </div>
            </div>
          </div>
        </div>

The fields on the second row are all standard Bulma fields and appear to display correctly, and all take up the exact same width. It does this as well if I use Bulma's columns to display 2 fields side-by-side. Is there something I'm doing wrong, or is this a bug?