Как растянуть форму в горизонтальное деление с помощью Flexbox?

Question

Предположим, что у нас есть стандартная форма с элементами ввода и кнопки, как в следующем примере. Как мы можем растянуть эту форму по горизонтали и отзывчиво с помощью CSS Flexbox?

<div>
   <form class="sampleform" onSubmit={this.onSubmit}>
       <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
             type="submit"
             class="button"
         >➕
         </button>
     </form>
</div>

Answer 1

Как это:

form {
  display: flex;
}
input {
  width: 100%;
}

<div>
   <form class="sampleform" onSubmit={this.onSubmit}>
       <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
             type="submit"
             class="button"
         >➕
         </button>
     </form>
</div>