How do I get email input and submit button on same line in MailChimp?

Question

I'm trying to get the "Email" input and "Submit" button to sit on the same line. Here's what it looks like:

So it should look like this (in regards to layout):

You can see the actual page here: http://www.grainbeast.com/free-goods/

Can you tell me how to accomplish this?

Answer 1

add the following css to style.css

#mc4wp-form-1 > input[type="email"] {
    display: inline-block;
}

and remove

float: left

from the submit button style so the html reads

<input type="submit" value="Get Free Access" />

Answer 2

Here my solution:

https://jsfiddle.net/00adpdb1/

Just wrap your input with "overflow:hidden" and pull to right button with "floar: right"

 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 input {display: block;
    width: 100%;
    height: 36px;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.57142857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #cfd3cc;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin: 0;
    }
    
    .btn {
    display: block;
    padding: 6px 14px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.57142857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 2px;
      background:red;
      color: #fff;
}

.pull-right {
  float:right;
}

.s-margin-left {
    margin-left: 10px;
}

<div class="form-group">
  <button class="pull-right btn btn-lg btn-primary s-margin-bottom s-margin-left" type="submit">send</button>
  <div style="overflow: hidden;">
      <input type="email" class="form-control" placeholder="Enter E-mail" value="" id="email" name="email">
  </div>
</div>