CSS: Need a very non-trivial text-alignment

Question

It is necessary that the word "think" be displayed above "let out the ..."

Note #1: "let out the", "creative", "beast" should be aligned with their baseline.

Note #2: top position of "think" should be equal to capline of "creative"

    .section{
        max-width: 940px;
        margin: 0 auto;
    }
    .section__title{
        font-family: 'KenyanCoffeeRg-Bold',sans-serif;
        text-transform: uppercase;
        text-align: center;
        color: #3f3b48;
        font-size: 56px;
        font-weight: 700;
    }
    .text--handwritten{
        font-family: 'Pacifico',cursive;
        text-transform: capitalize;
        font-weight: 300;
        font-style: italic;
    }
    .text--emphasized{
        font-size: 122px;
        color: #ff0000;
    }

    <section class="section">
        <h1 class="section__title">
            <span class="text text--handwritten">Think</span>
            <!-- Typical linebreak not solve my problem... -->
            <br>
            <span>Let out the</span>
            <span class="text text--emphasized">creative</span>
            beast
        </h1>
    </section>

Answer 1

Simple solution for all:

.section {
    max-width: 940px;
    margin: 0 auto;
}

.section__title {
    font-family: sans-serif;
    font-size: 50px;
    color: red;
    line-height: 1;
    margin: 0;
    text-align: center;
    padding: 20px 0;
    background: repeating-linear-gradient(to right,
            #FFE5E5,
            #FFE5E5 40px,
            #fff 40px,
            #fff 50px);
}

.section__title span {
    position: relative;
    font-size: 20px;
    color: black;
}

.section__title span em {
    font-family: serif;
    position: absolute;
    right: 0;
    top: -20px;
}

<section class="section">
    <h1 class="section__title"><span>LET OUT THE<em>Think</em></span> CREATIVE <span>BEAST</span></h1>
</section>

Also on JSFiddle.