JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="form-inline-expanded">
    <input />
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <span class="no-wrap">Plan Duration [d]</span>
    <select>
            <option>&lt;</option>
            <option>&lt;=</option>
            <option>=</option>
    </select>
    <input />
</div>
</div>

SCSS

.container {
  width: 500px;
  background-color: #CDCDCD;
  padding: 15px;
}

.form-inline-expanded {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    input {
        flex-grow: 1;
    }
   
    .no-wrap {
        flex-shrink: 0;
    }
    
    *:not(:first-child) {
        margin-left: 3px;
    }
}