<div class="form-group">
  <label for="standard-select">Standard Select</label>
  <div class="form-field select">
    <select id="standard-select" name="standard-select">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
      <option value="Option length">
        Option that has too long of a value to fit
      </option>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="multi-select">Multiple Select</label>
  <div class="form-field select select--multiple">
    <select id="multi-select" name="multi-select" multiple>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
      <option value="Option length">
        Option that has too long of a value to fit
      </option>
    </select>
  </div>
</div>

 

.form-field {
    border-color: var(--color-default, color("default"));

    &:focus {
        @include field-focus;
    }

    &:disabled {
        @include field-disabled;
    }
}

.form-field.select {
    display: grid;
    align-items: center;
    grid-template-areas: "select";

    background-image: linear-gradient(
        to top,
        scale-color(color("white"), $lightness: -10%),
        color("white") 33%
    );

    select, 
    &::after {
        grid-area: select;
    }

    &:not(.select--multiple)::after {
        content: "";
        width: 0.8em;
        height: 0.5em;
        background-color: var(--color-default, color("default"));
        justify-self: end;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }

    select {
        z-index: 1;

        &[multiple] {
            padding-right: 0;
        }
    }
}

 

`select` and `arrow down` are in the same grid template:

grid-template-areas: "select";

If without:

justify-self: end;

for arrow-down, it looks like:

 

With 'justify-self: end' it looks like: