Absolute alignment of multiple elements in horizontal scrolling div - html

Question

I have a list of elements inside a table-like container with horizontal scrolling. Each element has the same width but might have a different height. I would like each of these elements to have a button in its top-right corner, but I don't want this button to scroll out of view when the elements become too long.
I found this answer that solves the same problem, but for only one item in a scrolling div. It relies on positioning the button relative to the container, which I can't do due to the list of elements.
My current attempt looks like this:
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
/*
If the row isn't relative, all buttons stick to the
container top.
However, the buttons are now also out of view
due to the overflow.
*/
position: relative;
/* Just to make the content overflow */
white-space: nowrap;
/* For a clearer distinction between rows */
padding: 0.5rem;
border-bottom: 1px solid black;
}
.button {
/* The button needs to be in line with the parent row */
top: 0;
right: 0;
position: absolute;
}
<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br>
This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
</div>
</div>

Answer 1

You can solve this using position:sticky
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
position: relative;
white-space: nowrap;
padding: 0.5rem;
border-bottom: 1px solid black;
display:flex;
}
.button {
right: 0;
margin-top:-5px;
position: sticky;
align-self:flex-start;
margin-left:auto;
}
<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br> This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
<div class="row">
<div>
Some content
</div>
<button class="button">4</button>
</div>
</div>
</div>

Answer 2

it will be solved by a position:sticky