Placing aligned buttons inside column next to text box - html

Question

Apologies)
I'm struggling to find a solution to placing two buttons in a column (or two columns?) aligned to a text box to the left of them. I've done this by creating a rect within a colunm then adding the buttons (aligned) floating to the right. Looks fine in a desktop screen but once sized down to mobile the buttons (not being in columns) fall apart. I've attached a screenshot of the page: one row has an attempt but the buttons are placed over the existing column (text box) in the row. It's quite possibly staring me in the face but I can't see it!
Here's a snippet for the row and column:
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 ">
<ul>
<li>
Book flights.
</li>
</ul>
<button type="button" class="btn my-primary btn-sm my-small-btn">COMPLETE</button>
<button type="button" class="btn my-primary2 btn-sm my-small-btn"> DELETE </button>
</div>
</div>```
And here's the code for the the row with the buttons that are aligned in desktop but are effectively floating outside a column:
```<div class="row">
<div class="col-8 col-md-6 white-rect mr-4">
<ul>
<li>
Reschdule Twitter Meeting.
</li>
</ul>
</div>
<button type=".button" class="btn my-primary btn-sm my-small-btn">COMPLETE</button>
<div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>
<button type=".button" class="btn my-primary2 btn-sm my-small-btn"> DELETE </button>
</div>
Many thanks.

Answer 1

you might need to adjust the numbers, but something like this is how I would do it:
.grid {
display: grid;
grid-gap: 12px;
grid-template-columns: 1fr max-content;
}
#media screen and (min-width: 768px) {
.grid {
grid-gap: 24px;
grid-template-columns: minmax(200px, 1fr) minmax(max-content, 1fr);
}
}
.input {
width: 100%;
}
<section class="grid">
<div class="input-container">
<input type="text" class="input">
</div>
<div class="buttons-container">
<button class="button">complete</button>
<button class="button">delete</button>
</div>
<div class="input-container">
<input type="text" class="input">
</div>
<div class="buttons-container">
<button class="button">complete</button>
<button class="button">delete</button>
</div>
<div class="input-container">
<input type="text" class="input">
</div>
<div class="buttons-container">
<button class="button">complete</button>
<button class="button">delete</button>
</div>
<div class="input-container">
<input type="text" class="input">
</div>
<div class="buttons-container">
<button class="button">complete</button>
<button class="button">delete</button>
</div>
</section>