Form validation error position

[journeyman_73]

I'm creating a theme but using Zurb foundation for sites as the css frame work.

This is my subscribe.phtml

<form id="subscribe-newsletter" class="form subscribe" novalidate action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>" method="post" data-mage-init='{"validation": {"errorClass": "mage-error"}}' id="newsletter-validate-detail">

                    <div class="input-group">

                        <input name="email" type="email" id="newsletter" class="input-group-field" placeholder="<?= $block->escapeHtml(__('Enter your email address')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}"/>
<!-- from here -->
                        <div class="input-group-button">

                            <button class="button" title="<?= $block->escapeHtmlAttr(__('Subscribe')) ?>" type="submit"><?= $block->escapeHtml(__('Sign up now')) ?></button>

                        </div>

                    </div>
                    <!-- to here -->
                </form>

I want to move the error position from directly after input to outside the input group, how is this possible?

Cheers