Q:

HTML symbol brakes height of text

Apparently I am doing something wrong - when I'm trying to put HTML symbol before word, the height of next word, without HTML symbol, has different height, and it's not in the same line.  

A:

The problem is with the default size of the symbol.  If you set the size of the symbol, you won't see the problem.  Have a look at the code below:

.a {
    display: flex;
}
h1 {
    text-transform: uppercase;
}
span.symbol {
    font-size: 26px;
}
<div class="a">
    <h1><span class="symbol">&#9785;</span>123-456-789</h1>
    <h1>text 2017</h1>
</div>

In short:
Wrap the symbol inside a span and set it's font size. 
span.symbol {
    font-size: 26px;
}

