title: How to get Flexbox to allow an input to be 100% width?
body: <p>I have the following flexbox form powered by bootstrap 4.</p>
  
  <p><a href="https://jsfiddle.net/kkt0k2bs/1/" rel="nofollow noreferrer">https://jsfiddle.net/kkt0k2bs/1/</a></p>
  
  <p>I have a media query to resize the form elements for smaller display.</p>
  
  <p>On larger displays, I want the form items to be inline, but on smaller screens, I want the form elements to be stacked and at 100%.</p>
  
  <p>The input is not going 100% width on smaller displays... How can I enable the code to get the width to 100% on smaller displays?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="form-mod"&gt;
          &lt;form class="form-inline justify-content-center d-inline-flex"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div&gt;
                      &lt;input type="text" name="email" value="" placeholder="Enter your email..." class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Request an Invite&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.form-mod {
    display: inline-block;
    text-align: center;
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3;
    box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);
  
    [type="text"] {
      width: 260px;
      margin-right: 16px;
      border-radius: 100px;
      padding-left: 18px;
      border-radius: $border-radius;
      font-size: 16px;
    }
  
    @include media-breakpoint-down(sm) {
      .form-group {
        width: 100%;
      }
      [type="text"] {
        width: 100%;
        margin: 0 0 16px 0;
        display: block;
      }
      opacity: .5;
    }
  }
  </code></pre>