Bootstrap grid not aligning correctly in bootstrap 4 due to equal column size

I used basic bootstrap grid system in a react application on a form. Grid is rendered dynamically through map function. I am using bootstrap 4

I want to put 'Customer Phone 4' under 'Customer Phone 1' but it wont automatically adjust because of same height option in column, so to remove that I added the class name 'align-items-start' to the row div which removed the extra space but yet it didn't adjust. (Refer sample)

Rendered code looks something like this.

<div className='row align-items-start'>
 <div className='col-md-6 pb-4'>
  label
  <div className="row">
   <div className="col-12">input</div>
   <div className="col-12">input</div>
   <div className="col-12">input</div>
   <div className="col-12">input</div>
  </div>
 </div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-6 pb-4">input</div>
</div>

sample