title: Unable to center and right align bootstrap 4
body: <p>I want to center the 2 rows (temperature and relative humidity) and at same time, they have to be aligned right to each other. However I am not able to achieve that. I tried different combo including pull-right, but in vain. Kindly help. </p>
  
  <p><strong>Current Wrong Output:</strong>
  <a href="https://i.stack.imgur.com/IhZKV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IhZKV.png" alt="enter image description here"></a>  </p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>            &lt;div class="container-fluid h-100 "&gt;
                  &lt;div class="row h-100 justify-content-center"&gt;
                      &lt;div class="col-md-10 h-100 border"&gt;
  
                          &lt;div class="d-flex mt-5 flex-column align-items-center"&gt;
  
                              &lt;div class="p-2 text-center"&gt;
                                  &lt;h1 class="display-6"&gt;Relative Humidity Control&lt;/h1&gt;
                                  &lt;h3 class="text-muted"&gt;Dry Bulb Temperature Calculator - 2&lt;/h3&gt;
                                  &lt;p class="lead"&gt;By &lt;a href="https://parthi2929.github.io/"&gt;Parthiban R&lt;/a&gt;&lt;/p&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
  
                          &lt;form&gt;
  
                              &lt;div class="form-row align-items-center justify-content-center"&gt;
                                  &lt;label&gt;Dry Bulb Temperature Outside $\ t_1 \ \ $&lt;/label&gt;
                                  &lt;input class='col-1 border' type="text" value="0" min="0" max="100" step="0.1"&gt;
                                  &lt;span&gt;$\ ^{\circ}C$&lt;/span&gt;
                                  &lt;div id="t1-slider-fill"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-row align-items-center justify-content-center"&gt;
                                  &lt;label&gt;Relative Humidity Outside $RH_1 \ \ $&lt;/label&gt;
                                  &lt;input class='col-1 border' type="text" value="0" min="0" max="100" step="0.1"&gt;
                                  &lt;span&gt;$\ \%$&lt;/span&gt;
                                  &lt;div id="rh1-slider-fill"&gt;&lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/form&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>