如何在减小text_field宽度的同时将表单列中的text_field中心与同一行中的按钮对齐？

Question

问题：我有一个text_field表单，在表格列中带有一个提交按钮。当我将按钮对齐到text_field的右侧时，它将整个表单推到左侧，同时也推挤了所有其他列。

我确实相信宽度：85px（下图）正在影响这一效果，但需要对此SOMEHOW进行修复

<td class="center">
  <div class="input-group">
    <%= form_for user, remote: true do |f| %>
       <%= f.text_field :field, class: "form-control center", style: "width:85px;"  %>
       <%= f.button data: {confirm: "Are you sure?"}, class: "btn btn-light" do %>
          <i class="fa fa-pencil" aria-hidden="true"></i>
       <% end %>
    <% end %>
  </div>
</td>

https://jsfiddle.net/h9qrspdn/1/

出于某种原因，输入字段在jsfiddle中不起作用。但这会将按钮放在文本字段的同一行中。但是你看到我的问题

这是所有引导程序4 btw

共有4列，表格位于右侧的最后一列中。

如果我没有<div class="input-group">，则所有内容都居中（除了字体真棒按钮之外，但这是一个不同的问题-我使用常规的f.submit进行了尝试，并且同样的问题仍然存在）窗体列应如何，但按钮在text_field下。一旦有了<div class="input-group">，按钮将对齐到text_field的右侧，但随后所有列都向左偏移约10％，并且text_field / button也被对齐到其'列内的左侧。 / p>

是否有一种方法可以在不使用输入组的情况下将按钮保持在右侧？我觉得这样可以帮助它保持居中位置，而只需将按钮固定在右侧即可。

如何将text_field / button都移到中心，又不影响表格推其他元素？