title: How to make one column have position fixed on horizontal scroll only?
body: <p>I have one inline form that spans over horizontally and vertically. In this form, I have one
  last column that is an add button that I want it to have a fixed position but only when I scroll the form horizontally, not vertically.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  
    &lt;title&gt;Hello, world!&lt;/title&gt;
  
    &lt;style&gt;
      .btn-control {
        position: fixed;
        right: 0;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Inline form&lt;/h1&gt;
  
    &lt;div class="container" style="width: 55%; height: 500px;"&gt;
      &lt;div class="row" style="flex-wrap: nowrap; overflow-x: scroll;"&gt;
        &lt;form style=" "&gt;
          &lt;div class="form-row flex-nowrap"&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;First Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="First name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Last Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Last name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Gender&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Gender"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Age&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Age"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Phone Numher&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Phone Numher"&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-3 btn-control"&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;button class="btn btn-info btn-circle"&gt;+&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row flex-nowrap"&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;First Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="First name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Last Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Last name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Gender&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Gender"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Age&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Age"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Phone Numher&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Phone Numher"&gt;
            &lt;/div&gt;
  
            &lt;div class="col-3 btn-control"&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;button class="btn btn-info btn-circle"&gt;+&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row flex-nowrap"&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;First Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="First name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Last Name&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Last name"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Gender&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Gender"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Age&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Age"&gt;
            &lt;/div&gt;
            &lt;div class="col-3"&gt;
              &lt;label for=""&gt;Phone Numher&lt;/label&gt;
              &lt;input type="text" class="form-control" placeholder="Phone Numher"&gt;
            &lt;/div&gt;
  
            &lt;div class="col-3 btn-control"&gt;
              &lt;p&gt;&lt;/p&gt;
              &lt;button class="btn btn-info btn-circle"&gt;+&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;!-- Optional JavaScript; choose one of the two! --&gt;
  
    &lt;!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have set <code>position: fixed</code> but does not solve the problem as currently, the button has fixed position on both horizontal and vertical. I found some <a href="https://stackoverflow.com/questions/22425068/fixed-position-horizontal-scrollbar">resources</a>, but it does not fit my need.</p>
  <p>Thanks.</p>