I am trying to create a web page based on my canva design in the first image below. The second image below is my result. How do i properly give adequate spacing for my first labels so they are not compressed to the left?

My Canva design

My result

This is my current HTML Code for the form below.

<form class="ID-register"> 
                <label2 for="passport number">Paspport Number:</label> 
                    <input type="text" id="passport number" name="passport number"><br><br>
                 <label for="national ID number">National ID Number</label>
                     <input type="national ID number" id="National ID number" name="National ID number"><br><br>
            </form>

Below is the CSS for the particular form I am trying to edit

ID-register {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1rem;
    }

    label2 {
        display: inline-block; width: 100px; text-align: left; margin-right: 10px;
    }

    label3 {
        text-align: left
    }
 

if you want to view the full code, it’s on codepen.io. here is the link: codepen work