Could someone assist me with adjusting the alignment of this checkbox when resizing the window for mobile view? The label text is breaking into a new line while the checkbox remains in its original position. How can I make the checkbox align closer to its label? Thank you in advance.
https://i.sstatic.net/uReqs.png
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" (change)="termsAndConditions($event.target)">
<label class="custom-control-label" for="customCheck1">Accept the <a href="https://docs.google.com/document/d/demodemodemo" target="_blank"><b>Terms and Conditions</b></a></label>
</div>CSS of container
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
width: 90%;
max-width: 450px;
position: relative;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}<div class="wrapper">
<div id="formContent">
<h2 style="cursor: pointer" routerLink="/login" routerLinkActive="active">Sign In</h2>
<h2 style="cursor: pointer" routerLink="/signup" routerLinkActive="active">Create Account</h2>
<router-outlet></router-outlet>
</div>
</div>