How do I resize and input box and also align at the same time?

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.

<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!

Solution

I played around with Css and used Grid and I got the results. Just check it out !!

.form {
    width: 350px;
    height: 350px;
    border: 4px solid rgb(43, 183, 183);
    margin: 30px;
    padding: 10px;
}
.form h1 {
    color: blue;
    text-align: center;
    line-height: 15px;
}

form {
    padding-top: 20px;
    padding-left: 20px;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 20px;
}
form #fname {
    width: 120px;
}
form #lname {
    width: 30%;
}
form #email {
    width: 140px;
}
form #address {
    width: 160px;
}

.form button {
    width: 80px;
    border-radius: 30%;
    border: none;
}
.form #submit {
    margin-left: -100px;
    color: white;
    background-color: rgb(0, 140, 255);
}
.form #cancel {
    color: white;
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="form2.css">
</head>
<body>
    <div class="form">
        <h1>Form Add Supplier</h1>
        <form>
           <label>First Name</label>
           <input type="text" id="fname"> <br>
           <label>Last Name</label>
           <input type="text" id="lname"> <br>
           <label>Email</label>
           <input type="text" id="email"> <br>
           <label>Address</label>
           <input type="text" id="address"> <br>
           <label>Company's Name</label>
           <input type="text" id="cname"> <br>
           <h1></h1>
           <button id="cancel">Cancel</button>
           <button id="submit">Submit</button>
        </form>
    </div>
</body>
</html>