Keep button in fixed position independent of window size - html

Question

I have a page where a Submit button is supposed to be positioned on the right side of the bar as shown in the picture here:
However, I want the button to stay there even when the bar gets scrolled horizontally, which I have achieved via position: fixed;. This works until the screen size is adjusted to larger than the window, as seen here: https://media.giphy.com/media/SiErhserLwSYciEdS3/giphy.gif To fix that, I saw some recommendations for making position: absolute; which works for the screen size adjustments, but does not leave the button in a fixed position, as evidenced here: https://media.giphy.com/media/wHeXCgQ3fEIlPv2tr4/giphy.gif
My question is how I can achieve this expected result, where the button is fixed to the right side of the table toolbar, unaffected by horizontal scrolling, but is not affected by the window/screen size increasing/decreasing.
The code for this element looks as follows:
<div class="one">
<div class="two">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
.one {
width: 70%;
overflow: auto;
z-index: 10;
position: relative;
float: left;
height: 100%;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 4px;
}
.two {
height: 49px;
width: 100%;
border-bottom: 1px solid #dbdbdb;
}
.btn-danger {
position: absolute;
}

Answer 1

This behavior was achieved by changing the CSS to .btn-danger to:
.btn-danger {
position: sticky;
margin-top: 7px;
left: 10px;
}
It is acceptable that the button stay on the left in this case.

Answer 2

Why not use bootstrap responsive #media query to create breakpoints like so
#media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) #media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) #media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) #media (min-width: 1200px) { ... }