Focus Order

<section id="contentStart">
    <div class="pageContent">
        <h2>Contact Us</h2>
        <p>
            The Pearson Accessibility Team for Assessments is available to
            respond to questions regarding the accessibility of our products.
            Please provide your contact information and details about your
            questions or concerns.
        </p>
        <h3>Pearson VUE:</h3>
        <p>
            For questions about account access, exam
            scheduling, rescheduling, or for other questions unrelated to
            exam access for individuals with a disability, please go to
            <a href="https://home.pearsonvue.com/Test-takers/Customer-service.aspx">
                Customer Service for Test-Takers at Pearson VUE
            </a>.
        </p>
        <h2 style="margin-top: 1em;">Stay Informed</h2>
        <p>
            With Neo soon being retired, please subscribe to our
            <a href="#">a11y.training mailing list</a>
            to ensure you receive updates delivered directly to your inbox.
        </p>
    </div>
    <div class="frm-container">
        <form>
            <div class="container">
                <h2>Register</h2>
                <p>Please fill in this form to create an account.</p>
                <label for="fullname">Name</label>
                <input type="text" id="fullname">

                <fieldset>
                    <legend><strong>Gender</strong></legend>
                    <input type="radio" id="option1" name="options" value="1">
                    <label for="option1">Male</label>
                    <input type="radio" id="option2" name="options" value="2">
                    <label for="option2">Female</label>
                </fieldset>

                <label for="role_select">Role</label>
                <select id="role_select">
                    <option value="Educator">Educator</option>
                    <option value="Learner">Learner</option>
                </select>
                <div class="inline">
                    <input type="checkbox" id="myCheckbox">
                    <label for="myCheckbox" style="font-size: 14px;">
                        I agree to the Terms of Use and acknowledge the Privacy Policy.
                    </label>
                </div>
                <button>Submit</button>
                <span>
                    Have a Pearson account?
                    <a href="https://www.pearson.com/en-us.html"> Sign in.</a>
                </span>
            </div>
        </form>
    </div>
</section>

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
    border: 3px solid #7f7f7f;
}

h1, span {
    margin: 0.5em;
}

input[type=text] {
    margin: 0.25em 0 1em 0;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

select {
    margin: 0.25em 0 1em 0;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

button {
    padding: 0.75em;
    border: none;
    background-color: #003057;
    color: white;
    border-radius: 40px;
    font-size: 16px;
}

button:hover {
    background-color: #037d76;
}

button:focus {
    outline: .10em solid #000000;
    outline-offset: 1px;
}

.inline {
    display: flex;
    align-items: center;
    margin: 0.5em 0;
    line-height: 1.5;
}

.inline input[type=checkbox] {
    flex: none;
    margin-right: .75rem;
    transform: scale(1.5);
}

fieldset {
    margin-bottom: 0.75em;
}

.pageContent {
    flex-basis: 50%;
}

#contentStart {
    display: flex;
    flex-wrap: wrap;
}

.frm-container {
    flex-basis: 50%;
}

@media screen and (max-width: 600px) {
    #contentStart {
        display: block;
    }

    .pageContent > div {
        flex-basis: 100%;
    }
    .container {
        width: 80% !important;
    }
}