Position error message directly below recaptcha

I have a recaptcha on a form that I am using and would like any potential error messages to appear directly underneath. Currently the error message appears to the right of the recaptcha. How do I fix this?

<div class="col-sm col-md-3 d-flex align-items-center contact-form">
  <div style="margin-right: 10px;" class="g-recaptcha" data-sitekey="my-key"></div>
  {% if messages %}
    {% for message in messages %}
      <div style="position: relative;">
        <p class="error-message" style="bottom: 10px;">{{ message }}</p>
      </div>
    {% endfor %}
  {% endif %}
</div>
<div class="col-sm col-md-3 d-flex align-items-center contact-form">
  <button class="download-btn" type="submit">Get In Touch With Us</button>
</div>
</div>

I tried making the recaptcha position absolute and the div above it relative but for some reason the recaptcha stays absolute and doesn't move when the page size changes.