I have a very simple table and I want to vertically align the text of two elements, one of which is plain text and the other is a button (I've put them in span tags, because I've been trying different things), so now the code snippet looks like that:

```
<tr>
   <td>element</td>
   <td>
      <span> test </span>
      <span>
           <button class="btn btn-danger pull-right">Delete</button>
      </span>
   </td>
</tr>

```

and 

```
th, tr, td{
  vertical-align: middle !important;
}

```

Unfortunately no matter what I try, as long as I use the pull-right class it looks like this:

[![enter image description here](https://i.stack.imgur.com/lUn8Q.png)](https://i.stack.imgur.com/lUn8Q.png)

The "test" element just won't align in the middle or align with the "Delete" text of the button. Any tips would be appreciated!