JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Wide:</h1>
<div class="container" id="wide" multiple>
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
    <div class="divider">&lt;-&gt;</div>
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
</div>
<h1>Narrow:</h1>
<div class="container" id="narrow" multiple>
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
    <div class="divider">&lt;-&gt;</div>
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
</div>
<h1>Desired:</h1>
<div class="container" id="desired">
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
    <div class="divider">&lt;-&gt;</div>
    <select multiple>
        <option>One of many</option>
        <option>Two of many</option>
    </select>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

select {
    flex-basis: 10em;
    flex-grow: 1;
    
}

.divider {
    flex-basis: 3em;
    flex-grow: 0;
    text-align: center;
}

#wide {
    width: 24em;
}

#narrow, #desired {
    width: 14em;
}

#desired {
  display: block;
}

#desired select {
    width: 100%
}