Unable to get ReCaptcha to position cleanly next to another element

Question

For some reason I can't work out, when I add the ReCaptcha snippet to my site, it causes mysterious padding to be added which prevents the Captcha div and the div to its left from aligning properly. If I remove the Captcha and replace it with, say, an image or text, there is no problem.

How I expect the layout to work:

How it looks with the Captcha:

.inputs {
  display: table;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 1em;
  padding: 0.5em 0.5em 1em 0.5em;
  margin-bottom: 1em;
  background-color: #e9e9e9;
}
.inputs>div {
  display: table-row;
}
.inputs>div>div {
  display: table-cell;
  padding: 0 0.5em 0 0.5em;
  text-align: left;
}
.inputs .captcha {
  box-sizing: border-box;
  padding-top: 0.5em;
  width: 164px;
  height: 100%;
  overflow: hidden;
}
.inputs span {
  font-size: 0.75em;
  font-weight: bold;
}
.inputs input {
  box-sizing: border-box;
  width: 100%;
  text-indent: 0.2em;
}
.inputs select {
  box-sizing: border-box;
  width: 100%;
}

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      Hello, I'm a Captcha. I should be here, next to my friends 'Topic', and 'Subject'. But I like to be superior to them and float above!

    </div>
  </div>
</div>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      <div class="g-recaptcha" data-size="compact" data-sitekey="6LcU-SYTAAAAANenob4MJ24ZURnm8Q4OAmbuY3FW"></div>
    </div>
  </div>
</div>

Any ideas much appreciated!

Answer 1

The key is to set vertical-align:top; to "column".

.inputs {
  display: table;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 1em;
  padding: 0.5em 0.5em 1em 0.5em;
  margin-bottom: 1em;
  background-color: #e9e9e9;
}
.inputs>div {
  display: table-row;
}
.inputs>div>div {
  display: table-cell;
  padding: 0 0.5em 0 0.5em;
  text-align: left;
  vertical-align:top;
}
.inputs .captcha {
  box-sizing: border-box;
  padding-top: 0.5em;
  width: 164px;
  height: 100%;
  overflow: hidden;
}
.inputs span {
  font-size: 0.75em;
  font-weight: bold;
}
.inputs input {
  box-sizing: border-box;
  width: 100%;
  text-indent: 0.2em;
}
.inputs select {
  box-sizing: border-box;
  width: 100%;
}

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      Hello, I'm a Captcha. I should be here, next to my friends 'Topic', and 'Subject'. But I like to be superior to them and float above!

    </div>
  </div>
</div>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      <div class="g-recaptcha" data-size="compact" data-sitekey="6LcU-SYTAAAAANenob4MJ24ZURnm8Q4OAmbuY3FW"></div>
    </div>
  </div>
</div>

Answer 2

You should be using float property here to align items. Please make the below changes in your css and see if it works as you expected.

.inputs>div>div {
    display: table-cell;
    padding: 0 0.5em 0 0.5em;
    text-align: left;
    float: left;
    width: 80%;
}
.inputs .captcha {
    box-sizing: border-box;
    padding-top: 0.5em;
    width: 18%;
    height: 100%;
    float: right;
    overflow: hidden;
}

Hope this helps.