Form

<h4>Account Details</h4>
<form class="flex-form">
    <div class="fi-4 iop-form-element">
        <label class="iop-text-sm" for="first-name">First Name</label>
        <input id="first-name" class="iop-input" type="text" value="Robin" />
        <span class="iop-form-element__focus"></span>
    </div>
    <div class="fi-6 iop-form-element">
        <label class="iop-text-sm" for="surname">Surname</label>
        <input id="surname" class="iop-input" type="text" value="Instrumentation" />
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="num-only-1">Numbers only</label>
        <input id="num-only-1" class="iop-input" type="text" value="12" data-format-number/>
        <span class="iop-form-element__focus"></span>
    </div>
    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="num-only-2">Numbers only</label>
        <input id="num-only-2" class="iop-input" type="text" value="" data-format-number/>
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-10 iop-form-element">
        <label class="iop-text-sm" for="email">Email Address</label>
        <input id="email" value="" data-format-email type="email" class="iop-input" />
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="home-phone">Home number</label>
        <input id="home-phone" type="tel" value="02065617827" class="iop-input" data-format-phone />
        <span class="iop-form-element__focus"></span>
    </div>
    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="mobile-phone">mobile number</label>
        <input id="mobile-phone" type="tel" value="02065617827" class="iop-input" data-format-phone />
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-10 iop-form-element iop-form-element--textarea">
        <label class="iop-text-sm" for="huge-text">Huge Text</label>
        <textarea class="iop-input" id="huge-text" rows="10"></textarea>
        <span class="iop-form-element__focus"></span>
    </div>

    <h5 class="fi-10">Your Address</h5>
    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="address-line-1">Address Line 1</label>
        <input id="address-line-1" class="iop-input" type="text" value="21 Science Lane" />
        <span class="iop-form-element__focus"></span>
    </div>
    <div class="fi-5 iop-form-element">
        <label class="iop-text-sm" for="address-line-2">Address Line 2</label>
        <input id="address-line-2" class="iop-input" type="text" value="Instrumentation" />
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-4 iop-form-element">
        <label class="iop-text-sm" for="postcode">Post Code</label>
        <input id="postcode" class="iop-input" type="text" value="SC13 3NC" data-format-ukpostcode />
        <span class="iop-form-element__focus"></span>
    </div>
    <div class="fi-6 iop-form-element">
        <label class="iop-text-sm" for="city">City / Town</label>
        <input id="city" class="iop-input" type="text" value="London" />
        <span class="iop-form-element__focus"></span>
    </div>

    <div class="fi-7"></div>
    <div class="fi-3 text-right">
        <button type="button" class="iop-button">
      <span>Update Details</span>
    </button>
    </div>
</form>