I’m trying to create a from using HTML and CSS but having a problem with resizing the input box. I want to have a form which can align the input box title but also resize some of the input box.
Here’s is the picture I want to recreate in HTML & CSS:

As you can see above the input box title is align but also the have a different size of the input box. I have tried using the table to align the input box title but I can’t resize each of the input box differently.

Here is my HTML code so far for the form:

<div class=wrapper-wrapper>
        <div id="page-content-wrapper">
            <form>
                <div class="wrapper">
                    <h1>Form Add Supplier</h1>
                    <form action="">
                        <label>First Name</label>
                        <input type="text" name="first"><br />
                        <label>Last Name</label>
                        <input type="text" name="last"><br />
                        <label>Email</label>
                        <input type="text" name="email"><br />
                        <label>Address</label>
                        <input type="text" name="email"><br />
                        <a href="/mastersupplier"><button type="button" class="btncancel">Cancel</button></a>
                        <button type="submit" class="btnsubmit">Submit</button>
                    </form>
                </div>
            </form>
        </div>
    </div>

Any help would be appreciated, Thankyou!