This allows you to have a button in the same row as its input field.
<form class="flex-input">
<input type="text" placeholder="text" />
<button>Submit</button>
</form>
<footer class="site-footer">
<div class="site-footer__container">
<div class="site-footer__logo">
<svg><use xlink:href="#logo-vertical"></use></svg>
</div>
<ul class="site-footer__navigation">
<li>
<a href="#">What is Open Contracting</a>
</li>
<li>
<a href="#">Impact</a>
<ul>
<li><a href="#">Worldwide</a></li>
</ul>
</li>
<li>
<a href="#">Implement</a>
</li>
<li>
<a href="#">Data</a>
<ul>
<li><a href="#">Data Standard</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Latest</a>
</li>
</ul>
<div class="site-footer__cta">
<a class="arrow-link" href="#">
<svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
<span class="arrow-link__label">Get Our Newsletter</span>
</a>
</div>
<div class="site-footer__contact">
<h3 class="site-footer__contact-heading / uppercase">Contact</h3>
<p><a href="#">engage@open-contracting.org</a></p>
<p>Open Contracting Partnership,<br />641 S Street NW, 20001 Washington, D.C., USA</p>
</div>
<div class="site-footer__social">
<h4 class="site-footer__social-header">Connect with us:</h4>
<a href="#">
<svg data-platform="twitter"><use xlink:href="#social-twitter"></use></svg>
</a>
<a href="#">
<svg data-platform="facebook"><use xlink:href="#social-facebook"></use></svg>
</a>
<a href="#">
<svg data-platform="linkedin"><use xlink:href="#social-linkedin"></use></svg>
</a>
</div>
<div class="site-footer__license">
<p>This work by the Open Contracting Partnership, unless otherwise noted, is licensed under a Creative Commons Attribution 4.0 International License.</p>
</div>
<div class="site-footer__copyright">
<span>Open Contracting Partnership 2019</span>
<a href="#">Terms</a>
</div>
</div>
</footer>
<header class="site-header">
<div class="site-header__container">
<a class="site-header__logo" href="#">
<svg><use xlink:href="#logo-horizontal"></use></svg>
</a>
<nav class="site-header__navigation">
<ul class="">
<li>
<a href="#">What is Open Contracting</a>
</li>
<li>
<a href="#">Impact</a>
<ul>
<li><a href="#">Worldwide</a></li>
</ul>
<nav class="site-header__mega-nav / mega-menu" aria-label="secondary">
<div class="mega-menu__container">
<h3 class="mega-menu__heading">
<a class="arrow-link" data-icon-color="white" href="#">
<svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
<span class="arrow-link__label">Learn more about who we are</span>
</a>
</h3>
<div class="mega-menu__intro">
<p>We transform public contracting so that it is fair and efficient. Learn about who we are, our vision, mission, strategy and values.</p>
</div>
<ul class="mega-menu__nav">
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Advisory Board</a>
</li>
<li>
<a href="#">Governance</a>
</li>
<li>
<a href="#">Financing</a>
</li>
</ul>
<ul class="mega-menu__nav">
<li>
<span class="mega-menu__sub-nav-heading">Topics</span>
<ul class="mega-menu__sub-nav">
<li>
<a href="#">Beneficial Ownership</a>
</li>
<li>
<a href="#">Gender</a>
</li>
<li>
<a href="#">Education</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Extractives</a>
</li>
<li>
<a href="#">Infrastructure</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</li>
<li>
<a href="#">Implement</a>
</li>
<li>
<a href="#">Data</a>
<ul>
<li><a href="#">Data Standard</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Latest</a>
</li>
</ul>
<div class="site-header__mobile-language">
<a href="#">Espanol</a>
</div>
</nav>
<div class="site-header__toolbox">
<a href="#">Data Standard</a>
<a href="#">Worldwide</a>
<div class="select-menu select-menu--block select-menu--alt select-menu--small">
<label class="visually-hidden">Child marriage and…</label>
<select class="">
<option>Spanish</option>
<option>English</option>
</select>
<div class="select-menu__arrow"></div>
</div>
<div class="site-header__search">
<input type="text" placeholder="Search">
<button class="button--naked">
<svg><use xlink:href="#icon-search-rounded"></use></svg>
</button>
</div>
</div>
<div class="site-header__hamburger">
<svg data-icon="menu">
<use xlink:href="#icon-menu" />
</svg>
<svg data-icon="close">
<use xlink:href="#icon-close" />
</svg>
</div>
</div>
</header>
<nav class="mega-menu" aria-label="secondary">
<div class="mega-menu__container">
<h3 class="mega-menu__heading">
<a class="arrow-link" data-icon-color="white" href="#">
<svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
<span class="arrow-link__label">Learn more about who we are</span>
</a>
</h3>
<div class="mega-menu__intro">
<p>We transform public contracting so that it is fair and efficient. Learn about who we are, our vision, mission, strategy and values.</p>
</div>
<div class="mega-menu__nav-container">
<ul class="mega-menu__nav" data-type="menu">
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Advisory Board</a>
</li>
<li>
<a href="#">Governance</a>
</li>
<li>
<a href="#">Financing</a>
</li>
</ul>
<ul class="mega-menu__nav" data-type="grouped-menu">
<li>
<span class="mega-menu__sub-nav-heading">Topics</span>
<ul class="mega-menu__sub-nav">
<li>
<a href="#">Beneficial Ownership</a>
</li>
<li>
<a href="#">Gender</a>
</li>
<li>
<a href="#">Education</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Extractives</a>
</li>
<li>
<a href="#">Infrastructure</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="shell-grid-example">
<div class="shell-grid-example__full"></div>
<div class="shell-grid-example__wide"></div>
</div>
