How to align vertically input field text and checkbox?

display: flex is often an easy way to align elements.
In your CSS it would be like this :

div.form-row {
  display: flex;
  align-items: center;
}

/* I overwrote the bottom margins that were messing with my alignment */
div.form-group.col-6 {
  margin-bottom: 0;
}

You could wrap it in a div class and just set the margin how you want it to align it perfectly with your input box.

You would just add the below to your css and then wrap your custom-control element in a div with css class centered

Here's a live example https://jsfiddle.net/qpwsmoh8/ and the code

css

.centered {
    margin-top:38px;
}

html

<div class="centered">
    <div class="custom-control custom-checkbox">
    ...
    </div>
</div>

Change this

<div class="custom-control custom-checkbox">
                          <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
                          <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
                        </div>

To this snippet -

<div class="custom-control custom-checkbox" style="
                    display: flex;
                    justify-items: center;
                    align-items: center;
                ">
                    <label class="custom-control-label" style="
                    float: left;
                "></label>
                      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
                      <label class="" for="sameAddress">check this box if mailing address is the same as physical address</label>
                    </div>

try adding this in the css for your input tag or the corresponding classname

input {
vertical-align: bottom;
position: relative;
}