Buttons not being affected by bootstraps col-md - html

Question

I have what I think is a very basic problem but to which I cannot find the solution. So I have a form in my rails project. I want to create an input field, and two buttons associated with that field so I can add another type of input field.
If I click on the green button, I append another set of the same 3 fields.
<div class="col-md-2">
<%= f.input :select1, collection: #traffic_vault.sort + [["------ Aggregations ------ ", ""]] + #traffic_vault_aggregations.sort, include_blank: false, label: "Select Dimensions (*)", input_html: {class: "remember_timestamp", type: "text" } %>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success" onclick="apply_function(0)">Apply Function</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success" onclick="rename(0)">Rename It</button>
</div>
My problem is that the input field is working fine by taking exactly the col-md that I put there, but the buttons are not, they are taking slightly less space, not exactly col-md-2. So, when adding more fields to the first image, since the buttons are not exactly col-md-2, I get this:
I found out the problem is with the buttons because if I change it to inputs, it is working perfectly.
As we can see, they all have the same space between them, and each of them is col-md-2, so when adding 6 of these fields, you have col-md-12, so anymore fields added will be placed below and so on, but not with the buttons.
What is the problem?
solution: thanks to Siim for the answer. By placing style="width:100%;" button will take all available width. But still, i have a problem where, even if the buttons are col-md-2, like the inputs from before, if i add a 3rd set of fields, its not being placed correctly like in the 3rd image with the inputs, where the new set is placed at the beginning of another row.

Answer 1

Add w-100 class to the button. This tells the button to take up 100% of the available space.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>
<input class="form-control">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success">
btn
</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-success w-100">
btn
</button>
</div>
</div>
</div>