JSFiddle - React, Tailwind, and code Playground

by Dongor7

HTML

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

SCSS

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


$dynamic-fields-set__space: 10px;
$dynamic-fields-set__field-min-width: 120px;

.c-dynamic-fields-set {
  max-width: ($dynamic-fields-set__field-min-width * 4) - 1;
}
.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: $dynamic-fields-set__field-min-width;
    padding: $dynamic-fields-set__space 0 0 $dynamic-fields-set__space;
    box-sizing: border-box;
    
    &.m-flex {
      display: flex;
      flex-wrap: wrap;
      margin-top: -$dynamic-fields-set__space;
      padding: 0;
    }
  }
}
.c-dynamic-fields-set__item {
  flex-grow: 1;
  flex-basis: 50%;
  min-width: $dynamic-fields-set__field-min-width;
  padding: $dynamic-fields-set__space 0 0 $dynamic-fields-set__space;
  box-sizing: border-box;
}