How to line up a css ::before pseudo element like a grid

Question

Is there a way, using css only, to line up a multiline element (and anchor in my example) so that the "before" bit and the "anchor" bit appear side by side as though in a grid.

I.e.

>   i am a test link
    which goes over
    multiple lines

As opposed to the result of this (which will hopefully show it wrapping underneath the before content).

a::before {
  content: ">";
  padding-right: 20px;
}

div {
  width: 150px;
}

<div>
   <a href="#">i am a test link which goes over multiple lines</a>
</div>

Answer 1

display:table/table-cell works nicely.

a::before {
  content: ">";
  padding-right: 20px;
}
div {
  width: 150px;
  margin: 1em;
  border: 1px solid grey;
}

/* relevant stuff */
a {
  display: table;
  text-decoration: none;
}
a::before {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <a href="#">i am a test link which goes over multiple lines</a>
</div>

Or as inspired by Nenad Vracar's original answer, Flexbox

a::before {
  content: ">";
  padding-right: 20px;
}
div {
  width: 150px;
  border: 1px solid grey;
  margin: 1em;
}

/* relevant stuff */
a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

<div>
  <a href="#">i am a test link which goes over multiple lines</a>
</div>

Answer 2

You can use Flexbox like this and you can also vertically align items

DEMO

div {
  width: 150px;
}

a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

a:before {
  content: ">";
  margin: 5px;
}

---

<div>
   <a href="#">i am a test link which goes over multiple lines</a>
</div>