I am trying to create a button without using divs, as it's a button for an email template. I am definitely getting mad as I am not able to achieve my design.

What I am trying to do is something very simple, like this:
[![enter image description here](https://i.stack.imgur.com/iT1Ug.png)](https://i.stack.imgur.com/iT1Ug.png)

The text "Button" may be longer and changing dynamically, therefore the text should be able to break lines and the chevron (>) should be always vertically centered.

I have tried to create two span tags, one for the text and one for the chevron but I am not able to use the space in a good way because of the span (cannot define width and they are not staying next to each other)

I have tried to use ::after on the span, and I am currently playing with that, but I am not able to center vertically this holy chevron if the text is 1-2-3 lines long.

[JSFiddle here](https://jsfiddle.net/fd4k91ra/)

```
<a href="#" class="button">
  <span>TEST BUTTON</span>
</a>

.button {
  position: relative;
  display: inline-block;
  width: 220px;
  min-height: 41px;
  background-color: #c9ec6b;
  border-top: 0;
  border-right: 0;
  border-left: 0px;
  cursor: pointer;
  padding: 10px 25px 10px 10px;
}

.button::after {
  content: ">";
  display: block;
  position: absolute;
  right: 14px;
  top: 50%;
}

```

any ideas? I am driving crazy.