<div> with display: inline-grid and <select multiple>control inside is misaligned

Issue

I'm trying to make a dual list to include/exclude items, and I'm having a problem that I can't identify.

I have 3 divs, which must be displayed next to each other: the first one with the "include" list, the second one with the actions to move items from one list to another, and the third one with the "exclude" list.

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    display: inline-grid;
}

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    </select>
  </div>
</div>

When one of the lists is empty, the container remains misaligned.

enter image description here

Any ideas on how to fix it?

I tried adding some more elements besides and fixing the top of the container, but it didn't work.

Solution

As with any inline elements the default alignment is baseline. Just apply vertical-align: top.

.dual-list .dual-list-include-container,
.dual-list .dual-list-actions,
.dual-list .dual-list-exclude-container {
  display: inline-grid;
  vertical-align: top;
}

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>
</div>

Answered By - Paulie_D