Form Project: input items not coming in same line

Please check my code below and help me in styling the items in same vertical line please

when I am giving each element left property a hardcoded value like 220px then it looks fine then too radio buttons and check boxes are not coming in same line but with this approach on changing the screen size all design gets messed up.

please suggest the best way to do it right.

your text is aligned to center which will keep them from lining up
try placing your elements within a container like this:

<div class="any-name">
          <label for="email" id="email-label" class="label">*Email:</label>
          <input type="email" class="form-items" id="email" placeholder="Please enter valid email ID" required>
</div>

then in css you set a width for the parent container and how much space within that parent container each child is allotted

.any-name{width: 80%;}
.label{width: 40%:
         text-align: center}
.form-item{width: 60%;
         text-align: left;}
             

this needs to change as well:

.grid-container
{
  background-color: white;
   width: 70vw;
   justify-content: center;
 margin:auto;
   padding:10px;
}

you have to declare a display of grid for it to work

.grid-container
{ display: grid;
  background-color: white;
   width: 70vw;
   justify-items: center; /*horizontal center*/
align-items: center; /*vertical center*/
/*margin:auto; not needed*/
   padding:10px;
}

be aware though that this will only center your form division within this container, it will not apply to any of the elements within your form.