Get width of reCaptcha and use it to set text field width?

Question

On my website I have a google reCaptcha and well it just makes my login form look really ugly.

Here's a screenshot

So I was looking around and found a website with a login form like this

Which looks really good, it's fully responsive and all. I was curious on a way to do this? Haven't really been able to find any examples of how to do this with a google reCaptcha.

Answer 1

You can do this by using table and setting text-box width to 100%

Example Code :

<table>
            <tr><td>
                <input type="text" style="width:100%;"><br>
            </tr></td>
            <tr><td>
                <input  class="scaleR" type="text" style="width:100%;"><br></tr></td>
            <tr><td>
                <div class="g-recaptcha" data-sitekey="SITE_KEY" data-callback="checked"></div>
            </tr></td>
        </table>

Result :