试着换掉这个。

<td class="column-verticallineMiddle" style="vertical-align:middle;">
      <div style="width:60%;float:left;" >
           <input type="text" class="form-control form-mediumItem"> 
      </div>
      <div style="width:30%; float:right;">
           <span class="pull-right pull-top">Abc</span>
      </div>
</td>

这里是FIDDLE

我有一个可行的解决方案：
在你的td中创建一个div，并在上面使用以下CSS：

.inline-td {
    display: flex;
}

这是JSFiddle

它也可以通过col-xs-8和col-xs-4来实现。

<td class="column-verticallineMiddle">
 <div class="row">
      <div class="col-xs-8">
          <input type="text" class="form-control form-mediumItem" />
      </div>
      <div class="col-xs-4">
          <span>Abc</span>
      </div>
 </div>
</td>

请查看jsfiddle

在我的例子中，向标记中添加一个d-flex类就达到了目的。

<td class="d-flex">
  <form action="/dir/delete" method="post">
    <button name="idDelete" th:value="${p.id}" class="btn btn-danger btn-sm" type="submit"><i class="fa fa-trash"></i></button>
  </form>
  <form action="/dir/edit" method="post">
    <button name="idEdit" th:value="${p.id}" class="btn btn-success btn-sm" type="submit"><i class="fa fa-edit"></i></button>
  </form>
</td>

如果你使用的是bootstrap，你可以使用官方文档中的inline form。

<td class="column-verticallineMiddle form-inline" style="vertical-align:middle;">
    <input type="text" class="form-control form-mediumItem" style="width:60%;">
    <span>Abc</span>
</td>

只需添加form-inline并确定输入宽度，请参见Jsfiddle。