How to have select/input be an explicit width when inline with a label, but on smaller screens break onto a new line and fill the width?

button {
  padding: 8px;
}

*, *:after, *:before, *::placeholder {
    padding: 0px;
    margin: 0px;
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    position: relative;
    min-height: 0px;
}

.Container {
    background: #F4F4F4;
    box-shadow: rgba(50,50,93,0.25) 0px 13px 27px -5px, rgba(0,0,0,0.3) 0px 8px 16px -8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 60px);
    max-width: 720px;
    overflow-y: auto;
    padding-bottom: 16px;
    padding-top: 16px;
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 1001;
}

.Field1 {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #DEDEDE;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px;
}

.Label1 {
    font-size: 18px;
    font-weight: bold;
}

input[type="number"] {
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
    min-width: 160px;
    padding: 16px;
}

.Field2 {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #DEDEDE;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px;
}

.Label2 {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

.Select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #FFFFFF;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23282828%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
    background-position: right 16px top 50%,0 0;
    background-repeat: no-repeat;
    background-size: 16px auto;
    border-radius: 4px;
    box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
    display: block;
    -webkit-flex-basis: 160px;
    -ms-flex-preferred-size: 160px;
    flex-basis: 160px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 16px;
}

.mobile {
  width: 320px !important;
}

<button onClick="document.querySelector('.Container').classList.toggle('mobile')">Toggle mobile</button>

<div class="Container">
  <div class="Field Field1">
    <div class="Label Label1">Width</div>
    <input
      type="number"
      value="100"
    />
  </div>
  <div class="Field Field1">
    <div class="Label Label1">Height</div>
    <input
      type="number"
      value="100"
    />
  </div>
  <div class="Field Field2">
    <div class="Label Label2">Fit</div>
    <select class="Select">
      <option value="">None</option>
      <option value="contain">Contain</option>
      <option value="cover">Cover</option>
      <option value="fill">Fill</option>
      <option value="inside">Inside</option>
      <option value="outside">Outside</option>
    </select>
  </div>
</div>