{# Short related fields go side by side in <div class="ui-field-row">. #}
<div style="display:grid;gap:32px;max-width:560px">
<.fieldset id="address" legend="What is your address?" hint="We'll send the licence to this address.">
<div class="ui-field" style="max-width:none"><label class="ui-label" for="ad1">Address line 1</label><input class="ui-input" id="ad1" autocomplete="address-line1"></div>
<div class="ui-field" style="max-width:none"><label class="ui-label" for="ad2">Address line 2 <span class="ui-label-optional">(optional)</span></label><input class="ui-input" id="ad2" autocomplete="address-line2"></div>
<div class="ui-field-row">
<div class="ui-field"><label class="ui-label" for="ad3">Town or city</label><input class="ui-input" id="ad3" autocomplete="address-level2"></div>
<div class="ui-field"><label class="ui-label" for="ad4">Postcode</label><input class="ui-input" id="ad4" autocomplete="postal-code" style="max-width:140px"></div>
</div>
</.fieldset>
<.fieldset id="contact" legend="How should we contact you?" error="Select at least one way to contact you">
<div class="ui-field" data-orientation="horizontal"><input class="ui-checkbox" type="checkbox" id="c-email" name="contact[]" value="email"><label class="ui-label" for="c-email">Email</label></div>
<div class="ui-field" data-orientation="horizontal"><input class="ui-checkbox" type="checkbox" id="c-phone" name="contact[]" value="phone"><label class="ui-label" for="c-phone">Phone</label></div>
</.fieldset>
</div>