JSFiddle - React, Tailwind, and code Playground

by Dongor7

HTML

<div class="c-dynamic-fields-set">
  <ul class="c-dynamic-fields-set__box">
    <li class="c-dynamic-fields-set__fields">
      <div class="c-dynamic-fields-set__item">
        <select></select>
      </div>
      <div class="c-dynamic-fields-set__item">
        <input/>
      </div>
    </li>
    
  </ul>
</div>

SCSS

body { padding: 50px; }
select, input { width: 100%; box-sizing: border-box; }


$dynamic-fields-set__space: 10px;

.c-dynamic-fields-set__box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: -$dynamic-fields-set__space 0 0 -$dynamic-fields-set__space;
  
  > li {
    flex-grow: 1;
    flex-basis: 50%;
    min-width: 120px;
    padding: $dynamic-fields-set__space 0 0 $dynamic-fields-set__space;
    box-sizing: border-box;
  }
}
.c-dynamic-fields-set__item {
  flex-grow: 1;
  
  + .c-dynamic-fields-set__item {
    margin-top: $dynamic-fields-set__space;
  }
}