title: bootstrap 4 fixed height <p> and <input>'s
body: <p>I am working editing page on Angular2 like as the following gif. There is a height difference between the transitions and this is not good for me. </p>
  
  <p>How can i fixed height with responsive and how can i change size <code>custom-control</code> (toggle/switch) ?</p>
  
  <p><a href="https://i.stack.imgur.com/CnPYL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CnPYL.gif" alt="enter image description here"></a></p>
  
  <pre><code>    &lt;ng-container *ngIf="!edit; then thenTemplate; else elseTemplate"&gt;&lt;/ng-container&gt;
      &lt;ng-template #thenTemplate&gt;
        &lt;div class="row col-12" *ngIf="header &amp;&amp; value != null "&gt;
          &lt;strong class="col-xs-12 col-md-4"&gt;{{header}}&lt;/strong&gt;
          &lt;p class="col-xs-12 col-md-8"&gt;{{onValue == value ? onText : offText}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;ng-template #elseTemplate&gt;
        &lt;div class="row col-12" *ngIf="header"&gt;
          &lt;strong class="col-xs-12 col-md-4"&gt;{{header}}&lt;/strong&gt;
          &lt;div class="col-xs-12 col-md-8 custom-control custom-switch "&gt;
  &lt;!-- if add thiss works normaly style="height:2.5rem"--&gt;
            &lt;input type="checkbox" class="custom-control-input" id="{{key}}" (change)="onValueChanged($event)" [ngModel]="onValue"&gt;
            &lt;label class="custom-control-label" for="{{key}}"&gt;{{onValue == value ? onText : offText}}&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/y3KKE7PKyGIC6cDTQACD?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/y3KKE7PKyGIC6cDTQACD?p=preview</a></p>