How to make all characters at the same time

Question

I’m willing to put all the elements of a div at the same time:

Mine so far is like this:

My HTML:

<div class="banner">
<div class="container"> 
    <div class="conteudo-banner">
        <h1>Kerline</h1>
        <div class="code-logo">
            <span>&lt;</span>
            <span>/</span>
            <span>Code</span>
            <span>&gt;</span>
        </div>
    </div>
</div>

My CSS:

.banner{
background-color: #FFFFFF;
padding: 98px 0 240px;
}

.conteudo-banner{
    margin-top: 65px;
}

.conteudo-banner h1{
    font-family: techno_hideo;
    font-size: 13.5em;
    color:#000000 ;
    text-align: center;
}

.code-logo{
    position: absolute;
    left: 50%;
    top: 20em;
}

.conteudo-banner .code-logo span{
    font-size: 6.5em;
    text-transform: uppercase;
    letter-spacing: -3px;
    font-weight: 700;
}

.conteudo-banner .code-logo span:nth-child(1),
.conteudo-banner .code-logo span:nth-child(2),
.conteudo-banner .code-logo span:nth-child(4){
    color:#292570;
    font-size: 7.5em;
    font-weight: 700;
}

.conteudo-banner .code-logo span:nth-child(3){
    font-style:italic;
}

Answer 1

I did it this way:

.conteudo-banner .code-logo span:nth-child(2){
    font-size: 6em;
    display: inline-block;
    position: relative;
    top:-4px; 
}

font-size - Regulates font size
display - Leaves span on the same line but with block options
position - Possible to manipulate the element up and down
top - Distance from top

So you can align according to your source, as the font I’m using is different makes it easier for you to make adjustments.

I made a small example by aligning / (Bar) : https://jsfiddle.net/uy02om17/