Могу ли я сделать так, чтобы два html-ввода разбивались на собственную строку, когда в их контейнере недостаточно места с помощью Flexbox?

Question

Допустим, у меня есть контейнер с динамической шириной. Внутри у меня есть два входа рядом; одна имеет минимальную ширину 60 пикселей, а другая имеет минимальную ширину 100 пикселей. Если контейнер станет меньше 160px, я бы хотел, чтобы входы располагались друг над другом. Это возможно с чистым CSS?

    <div class="u-centerY u-fillRemaining">
       <div class="table-twoInputs">
           <input type="text" class="table-effort" placeholder="Effort" value="">
           <input type="text" id="row-1-position" value="$2">
       </div>
    </div>


.table-twoInputs {
    display: flex;
    flex: 1;

    input {
        color: black;
        transition: none;

        &:first-of-type {
            text-align: left;
            left: 0;


            &::-webkit-input-placeholder {
                font-size: 10px;
                color: $table-gray;
            }

    // Browser quirk. These need to be separated out 
            &::-moz-placeholder {
                text-transform: uppercase;
                font-size: 11px;
                color: $table-gray;
            }

            ::-ms-placeholder {
                text-transform: uppercase;
                font-size: 11px;
                color: $table-gray;
            }
        }

        & + input {
            margin-left: 0.5rem;
            width: 150%;
        } 
    }
}
    .u-centerY {
       display: flex;
       align-items: center; 
    }

.u-fillRemaining {
    flex: 1;
}

Answer 1

.table-twoInputs {
  display: flex;
  flex-wrap: wrap;
}

.one {
  width: 100px;
}

.two {
  width: 60px;
}

<div class="u-centerY u-fillRemaining">
  <div class="table-twoInputs">
    <input type="text" class="one" value="one">
    <input type="text" class="two" value="two">
  </div>
</div>

https://jsfiddle.net/4u7pab8x/4/