JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer big">
  <div class="container">
    <div class="inner">
      <input type="text">
    </div>
  </div>
</div>

<div class="outer small">
  <div class="container">
    <div class="inner">
      <input type="text">
    </div>
  </div>
</div>

CSS

.outer {
  background-color: blue;
  padding: 10px;
}

.big {
  width: 350px;
}

.small {
  width: 150px;
}

.container {
  display: flex;
}

.inner {
  flex: 1 0;
  flex-basis: auto;
}

input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}