I'm trying to make a media query to display an input below the other instead on your side using Flexbox. As you can see, with my current code, I'm getting this:

[![enter image description here](https://i.stack.imgur.com/M4dep.png)](https://i.stack.imgur.com/M4dep.png)

But if I change the `flex-direction` to `column`, the input width is not the original. This is the result:

[![enter image description here](https://i.stack.imgur.com/xrWQo.png)](https://i.stack.imgur.com/xrWQo.png)

This is the my HTML:

```
<div id="mc_embed_signup">
  <form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&amp;id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <label for="mce-EMAIL">No te pierdas ningún artículo</label>
      <div class="mc-wrapper">
        <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
          <input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
        </div>
        <div>
          <input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
      </div>
      <div class="mc-error">
      </div>
    </div>
  </form>
</div>

```

And this is my CSS:

```
#mc_embed_signup {
  label {
    font-size: 2em;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  .mc-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px 0px 0px;
  }
  #mce-EMAIL {
    width: 100%;
    margin: 0px 30px 0px 0px;
    border: 2px solid $medium-grey;
    border-radius: 4px;
    text-indent: 20px;
  }
  .button {
    margin: 0px auto;
    cursor: pointer;
  }
}

```

Why is this happening?

NOTE: I can't provide a Fiddle because this is an integration with MailChip, so it calls a JS Script and it's not working properly on Fiddle, I don't know why... But the script doesn't add any extra classes, only the ones above.