I am trying to build a page to display the terms and conditions for my website. I am using nebular framework for my website. On clicking a link, the terms and conditions are displayed to the user in a modal dialog. The issue i am facing here is when the modal window is loaded, the text at the bottom of the panel is shown to the user rather than the text at the top. I would like to show the text at the top first from where the user can scroll down. Please see screen print and the corresponding code below,

Modal Window displaying Terms and Conditons

HTML Code

  <nb-card status="warning" class="dialog-card" nbSpinnerStatus="warning">
  <nb-card-header>Terms and Conditions</nb-card-header>    
  <nb-card-body>
      <div class="tandctext">
        <label>
          <b><u>Terms and Conditions</u></b>
          <p>
          A Terms and Conditions agreement acts as legal contracts between you (the company) who has the website or mobile app, and the user who accesses your website/app.
          Having a Terms and Conditions agreement is completely optional. No laws require you to have one. Not even the super-strict and wide-reaching General Data Protection Regulation (GDPR). 
          </p>
        </label>
        <br/>
        <div>
            <button class="offset-sm-5 col-sm-2" tabindex="2" type="submit" nbButton status="basic" autofocus (click)="closeDialog()">Close</button>
        </div>
      </div>     
    </nb-card-body>
  </nb-card>

CSS

.dialog-card{
    width: 800px;
    max-height: 90vh;
}

.tandctext {
    height: 50vh;
    overflow: auto;
}

Please help me with the best & easy way to do this.