How to put both sign up and Social Icon on same row in footer

[MSIH]

I want the sign form and the social icon to appear in the same row. This does now work:

   <footer class="footer navbar-light bg-dark">
        <h2 class="visually-hidden">Sitemap & information</h2>
        <div class="container-xxl footer-title-content">
            <div class="row">  
                <div class="footer-column col-md-6">
                    <h3 class="footer-heading">Sign up to our mailing list</h3>
                    <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
                        <label for="inputEmail" class="visually-hidden">Email</label>
                        <input type="email" class="form-control text-bg-light light-dark" id="inputEmail" placeholder="Enter your email">
                        <button type="submit" class="btn btn-secondary text-nowrap">Sign up</button>
                    </form>
                    <div>
                        <div class="footer-column col-md-6">
                            <h3 class="footer-heading me-md-6">Follow us</h3>
                            <ul class="navbar-nav gap-2 flex-row align-self-start">
                                <li><a href="#" class="btn btn-icon btn-social btn-twitter "><span class="visually-hidden">Twitter</span></a></li>
                                <li><a href="#" class="btn btn-icon btn-social btn-facebook "><span class="visually-hidden">Facebook</span></a></li>
                                <li><a href="#" class="btn btn-icon btn-social btn-instagram "><span class="visually-hidden">Instagram</span></a></li>
                                @*            <li><a href="#" class="btn btn-icon btn-social btn-whatsapp "><span class="visually-hidden">WhatsApp</span></a></li>
                                <li><a href="#" class="btn btn-icon btn-social btn-linkedin "><span class="visually-hidden">LinkedIn</span></a></li>*@
                                <li><a href="#" class="btn btn-icon btn-social btn-youtube "><span class="visually-hidden">YouTube</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

[julien-deramond]

Our Footer component is provided to be compliant with Orange Design System guidelines which doesn't recommend having the sign form and the social icons to appear in the same row.

However, if you really need to do such thing, you can try (and adapt depending on your needs) something like this to change the layout:

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-title-content">
    <div class="row">
      <div class="d-flex col-12 col-md-6 flex-column">
        <h3 class="footer-heading">Sign up to our mailing list</h3>
        <div class="row">
          <form class="d-flex col-12 gap-2 col-md-6">
            <label for="inputEmail" class="visually-hidden">Email</label>
            <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail" placeholder="Enter your email">
            <button type="submit" class="btn btn-secondary btn-inverse text-nowrap">Sign up</button>
          </form>
        </div>
      </div>
      <div class="d-flex col-12 col-md-6">
        <h3 class="footer-heading me-md-3">Follow us</h3>
        <ul class="navbar-nav gap-2 flex-row align-self-start">
          <li><a href="#" class="btn btn-icon btn-social btn-twitter btn-inverse"><span class="visually-hidden">Twitter</span></a></li>
          <li><a href="#" class="btn btn-icon btn-social btn-facebook btn-inverse"><span class="visually-hidden">Facebook</span></a></li>
          <li><a href="#" class="btn btn-icon btn-social btn-instagram btn-inverse"><span class="visually-hidden">Instagram</span></a></li>
          <li><a href="#" class="btn btn-icon btn-social btn-whatsapp btn-inverse"><span class="visually-hidden">WhatsApp</span></a></li>
          <li><a href="#" class="btn btn-icon btn-social btn-linkedin btn-inverse"><span class="visually-hidden">LinkedIn</span></a></li>
          <li><a href="#" class="btn btn-icon btn-social btn-youtube btn-inverse"><span class="visually-hidden">YouTube</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>