Help with vertical aligning a unicode symbol

[ChrisjChrisj]

I’ve tried several things with this code below. The Text4 line has a unicode symbol, that displays too high above the text line.
I’ve tried vertical align baseline, sub and various -2px heights, without success.

When I use the negative heights, it creates a gap between the Text4 and Text5 lines.
Any suggestions are welcomed.

<p>
<span class="title">Text Text Text</span><br>

Text1 Text1 Text1<br>

Text1Text2 Text2<br>

<span class="list">1. Text3 Text3 Text3<br>

2. Text4</span><span class="arrow">&#129175;</span> <span class="list">Text4<br>

3. Text5 Text5 Text5 Text5<br>
</span>
</p>

.arrow {
vertical-align: baseline;
font: 4.5vw arial;
}

[DaveMaxwell]

text-top seems to work if I also added the line-height to it.

.arrow {
vertical-align: text-top;
font: 4.5vw arial;
  line-height:1;
}

[ChrisjChrisj]

Many thanks for your reply.
text-top and line height 1.5, look good, to me, thanks, but it creates a gap between the Text4 and Text5 lines, still.
Any additional suggestions are welcomed.

[Archibald]

Use an SVG:

[SamA74]

You can also use relative positioning to nudge text off from its default position.

.arrow{
    position: relative;
    top: 0.1em; /* Adjust to suit */
}

Using relative won’t affect the flow of other surrounding characters.

On a side note, semantically your list should be an ol, not a span within a paragraph littered with line breaks.

[PaulOB]

Note that the arrow entity displays as a big square box to me on my Mac in chrome and Firefox.

Therefore I would suggest using the svg that @Archibald kindly supplied.

Also at the risk of being shot down in flames again I was also going to make the same comment as @SamA74 in that a heading tag followed by an ol list structure would be more semantic and appropriate

e.g.